jjzjj

javascript - DOMNodeInserted 的替代品

coder 2023-07-06 原文

众所周知，DOMNodeInserted 会使动态页面变慢，MDN even recommends不完全使用它，但不提供任何替代方案。

我对插入的元素不感兴趣，我只需要知道某些脚本何时修改了 DOM。是否有更好的替代突变事件监听器(可能是 nsiTimer 中的 getElementsByTagName)？

最佳答案

如果您正在创建针对最新手机和更新版本浏览器(Firefox 5+、Chrome 4+、Safari 4+、iOS Safari 3+、Android 2.1+)的网络应用程序，您可以使用以下代码为插入 dom 节点创建一个很棒的事件，它甚至在最初属于页面静态标记的节点上运行!

这是完整帖子的链接和示例:http://www.backalleycoder.com/2012/04/25/i-want-a-damnodeinserted/

关于 Mutation Observers 的注意事项:虽然最近浏览器中较新的 Mutation Observers 功能非常适合监视对 DOM 的简单插入和更改，但请理解这种方法可以用来做更多的事情，因为它允许您监控任何您能想到的 CSS 规则匹配。这对于许多用例来说非常强大，所以我将其打包在一个库中:https://github.com/csuwildcat/SelectorListener

如果您想针对各种浏览器，您需要为 CSS 和 animationstart 事件名称添加适当的前缀。您可以在上面链接的帖子中阅读更多相关信息。

基本的节点插入案例

CSS:

@keyframes nodeInserted {  
    from {  
        outline-color: #fff; 
    }
    to {  
        outline-color: #000;
    }  
}

div.some-control {
    animation-duration: 0.01s;
    animation-name: nodeInserted;
}

JavaScript:

document.addEventListener('animationstart', function(event){
    if (event.animationName == 'nodeInserted'){
        // Do something here
    }
}, true);

监听更复杂的选择器匹配:

这使得 Mutation Observers 几乎不可能做到的事情成为可能

CSS:

@keyframes adjacentFocusSequence {  
    from {  
        outline-color: #fff; 
    }
    to {  
        outline-color: #000;
    }  
}

.one + .two + .three:focus {
    animation-duration: 0.01s;
    animation-name: adjacentFocusSequence;
}

JavaScript:

document.addEventListener('animationstart', function(event){
    if (event.animationName == 'adjacentFocusSequence'){
        // Do something here when '.one + .two + .three' are 
        // adjacent siblings AND node '.three' is focused
    }
}, true);

关于javascript - DOMNodeInserted 的替代品，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6997826/

替代品DOMNodeInsertedstrongsectioncodejavascriptdomfirefox-addondhtmlmutation-events

有关javascript - DOMNodeInserted 的替代品的更多相关文章

  1. ruby - 在 jRuby 中使用 'fork' 生成进程的替代方案？ - 2

    在MRIRuby中我可以这样做:deftransferinternal_server=self.init_serverpid=forkdointernal_server.runend#Maketheserverprocessrunindependently.Process.detach(pid)internal_client=self.init_client#Dootherstuffwithconnectingtointernal_server...internal_client.post('somedata')ensure#KillserverProcess.kill('KILL',

  2. ruby-on-rails - 更好的替代方法 try( :output). try( :data). try( :name)? - 2

    “输出”是一个序列化的OpenStruct。定义标题try(:output).try(:data).try(:title)结束什么会更好？:) 最佳答案 或者只是这样:deftitleoutput.data.titlerescuenilend 关于ruby-on-rails-更好的替代方法try(:output).try(:data).try(:name)?，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.c

  3. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  4. ruby - 允许主机名包含下划线的 URI.parse 的替代方法 - 2

    我正在使用DMOZ的listofurltopics，其中包含一些具有包含下划线的主机名的url。例如:608609TheOuterHeaven610InformationandimagegalleryofMcFarlane'sactionfiguresforTrigun,Akira,TenchiMuyoandotherJapaneseSci-Fianimations.611Top/Arts/Animation/Anime/Collectibles/Models_and_Figures/Action_Figures612虽然此url可以在网络浏览器中使用(或者至少在我的浏览器中可以使用:

  5. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  6. ruby-on-rails - jRails 替代品 - 2

    你知道jrails的替代品吗？它或多或少已经过时(使用jQuery1.5-现在1.7是当前版本)。有人知道替代方案吗？谢谢编辑:我知道如何使用jqueryallone构建rails助手-但我喜欢rails助手，所以我不想单独使用jquery(没有jrails) 最佳答案 我一直在Rails中使用Prototype助手，最近我决定转而使用JQuery。起初我查看了JRails，因为它是一个直接替代品，因此需要最少的工作。但是!在阅读了更多关于JQuery的信息并尝试使用它之后，我逐渐明白，结合使用Rails和JQuery的最佳方式就是

  7. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  8. ruby-on-rails - 能够处理 rar/tar/zip/7z 的 Ruby/rubyzip 替代方案？ - 2

    关闭。这个问题不符合StackOverflowguidelines.它目前不接受答案。要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于StackOverflow来说是偏离主题的，因为它们往往会吸引自以为是的答案和垃圾邮件。相反，describetheproblem以及迄今为止为解决该问题所做的工作。关闭9年前。Improvethisquestion我想知道是否有人知道Ruby的ruby​​zip替代品，它可以处理各种格式，特别是zip/rar/7z？我知道libarchive，但它对我的目的来说并不完整(它是一个很好的gem)。(澄清一下，libarchive-对我不起作用-因为

  9. ruby-on-rails - 我将 Rails3 与 tinymce 一起使用。如何呈现用户关闭浏览器javascript然后输入xss？ - 2

    我有一个用Rails3编写的站点。我的帖子模型有一个名为“内容”的文本列。在帖子面板中，html表单使用tinymce将“content”列设置为textarea字段。在首页，因为使用了tinymce，post.html.erb的代码需要用这样的原始方法来实现。.好的，现在如果我关闭浏览器javascript，这个文本区域可以在没有tinymce的情况下输入，也许用户会输入任何xss，比如alert('xss');.我的前台会显示那个警告框。我尝试sanitize(@post.content)在posts_controller中，但sanitize方法将相互过滤tinymce样式。例如

  10. ruby-on-rails - 对于 Ruby 应用程序，是否有比 Sanitize 更好的替代方案？ - 2

    我爱Sanitize.这是一个了不起的实用程序。我遇到的唯一问题是，它需要永远准备一个开发环境，因为它使用Nokogiri，这对编译时间来说是一种痛苦。是否有任何程序可以在不使用Nokogiri的情况下执行Sanitize的操作(如果没有别的，只是温和地执行它的操作)？这将以指数方式提供帮助! 最佳答案 Rails有自己的SanitizeHelper。根据http://api.rubyonrails.org/classes/ActionView/Helpers/SanitizeHelper.html,它将Thissanitizehe

随机推荐