DOM 突变事件替换

发布于 2024-10-25 22:51:36 字数 221 浏览 4 评论 0原文

由于 DOM 突变已被 w3c 标记为已弃用（请参阅 http: //www.w3.org/TR/DOM-Level-3-Events/#events-mutationevents），是否有一种（快速）替代方法来检测 DOM 中的属性修改？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

白云悠悠 2024-11-01 22:51:36

突变事件被弃用的原因是巨大的性能问题。

替代品是Mutation Observers，请查看http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers 和 https://developer.mozilla.org/en/DOM/DOM_Mutation_Observers

有关突变的信息作为 MutationRecords 的有序序列传递给观察者，表示观察到的变化序列发生

示例用法：

    var observer = new MutationObserver(function(mutationRecords) {
    // Handle mutations
     });

    observer.observe(myNode,
     {  // options:
     subtree: true,  // observe the subtree rooted at myNode
     childList: true,  // include information childNode insertion/removals
     attribute: true  // include information about changes to attributes within the subtree
    });

Chrome 18、Firefox 和 Webkit nightly 版本支持此功能。 Firefox 14 也将支持此功能。

The reason that mutation events was deprecated was because of huge performance issues.

The replacement is Mutation Observers, look at http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers and https://developer.mozilla.org/en/DOM/DOM_Mutation_Observers

Information about mutations is delivered to observers as an ordered sequence of MutationRecords, representing an observed sequence of changes that have occurred

Sample usage:

    var observer = new MutationObserver(function(mutationRecords) {
    // Handle mutations
     });

    observer.observe(myNode,
     {  // options:
     subtree: true,  // observe the subtree rooted at myNode
     childList: true,  // include information childNode insertion/removals
     attribute: true  // include information about changes to attributes within the subtree
    });

This is supported in Chrome 18 and Firefox and Webkit nightly builds. Firefox 14 will also be supporting this feature.

回复收藏 0 原文

谁的新欢旧爱 2024-11-01 22:51:36

与 CSS 动画结合使用的 animationStart 是已弃用的 DOM* 事件的一个很好的替代品。 David Walsh 撰写了有关该方法的文章。

首先，设置关键帧并将其应用到您想要监听的元素（不要忘记供应商前缀！）：

@keyframes nodeInserted {  
  from { clip: rect(1px, auto, auto, auto); }
  to { clip: rect(0px, auto, auto, auto); }  
}

#parentElement > li {
  animation-duration: 0.001s;
  animation-name: nodeInserted;
}

接下来，添加监听器：

var insertListener = function(event){
  if (event.animationName == "nodeInserted") {
    // This is the debug for knowing our listener worked!
    // event.target is the new node!
    console.warn("Another node has been inserted! ", event, event.target);
  }
}
document.addEventListener("animationstart", insertListener, false); // standard + firefox
document.addEventListener("MSAnimationStart", insertListener, false); // IE
document.addEventListener("webkitAnimationStart", insertListener, false); // Chrome + Safari

Ta-da！这是David 的演示。它在 Chrome 扩展上非常适合我，将 Facebook 图片添加到 Google Voice（请参阅 content.css 并注入。 js）。

A great replacement for the deprecated DOM* events is animationStart in conjunction with CSS Animations. David Walsh writes about the method.

First, set up the keyframes and apply it to the elements you'd like to listen for (don't forget the vendor prefixes!):

@keyframes nodeInserted {  
  from { clip: rect(1px, auto, auto, auto); }
  to { clip: rect(0px, auto, auto, auto); }  
}

#parentElement > li {
  animation-duration: 0.001s;
  animation-name: nodeInserted;
}

Next, add the listener:

var insertListener = function(event){
  if (event.animationName == "nodeInserted") {
    // This is the debug for knowing our listener worked!
    // event.target is the new node!
    console.warn("Another node has been inserted! ", event, event.target);
  }
}
document.addEventListener("animationstart", insertListener, false); // standard + firefox
document.addEventListener("MSAnimationStart", insertListener, false); // IE
document.addEventListener("webkitAnimationStart", insertListener, false); // Chrome + Safari

Ta-da! Here is David's demo. It works great for me on a Chrome extension that adds Facebook pictures to Google Voice (see content.css and injected.js).

回复收藏 0 原文

多情癖 2024-11-01 22:51:36

一年后，出现了新的、闪亮的突变观察者 来自 DOM Level 4（点击那里的链接，它们解释了很多！）。 Mutation Event 触发了一千次，而 MutationObserver 仅触发一次，所有修改都包含且可访问。

适用于（截至 2017/03）：

Firefox 14+
IE 11
Edge
Opera 15+
Chrome 26+（18 至 25 前缀，window.WebKitMutationObserver）
Safari 6.0（前缀，window.WebKitMutationObserver ）

回复收藏 0 原文

呆 2024-11-01 22:51:36

据我所知，目前还没有其他选择，因此您只能使用仅在 Firefox 和 Opera 中受支持的 DOMAttrModified。在 IE 中，您有 onpropertychanged 事件，但在 Chrome/Safari 中无法获得类似的功能。根据您想要完成的任务和目标浏览器，您可以执行许多操作：