DOMNodeInserted 的替代方案

Question

众所周知，DOMNodeInserted 会使动态页面变慢，MDN 甚至建议不要完全使用它，但实际上并没有这样做。不提供任何替代方案。

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

Answer 1

如果您正在创建一个针对最新手机和较新版本浏览器（Firefox 5+、Chrome 4+、Safari 4+、iOS Safari 3+、Android 2.1+）的 Web 应用程序，您可以使用以下代码创建一个很棒的 Web 应用程序：插入 dom 节点的事件，它甚至在页面静态标记最初部分的节点上运行！

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

关于突变观察者的注意事项：最新浏览器中较新的 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);

Answer 2

@naugtur 简要提到的一种新替代方案是 MutationObserver。如果您正在开发的浏览器支持它（例如您正在开发浏览器扩展），它被设计为已弃用的突变事件的替代品。

Answer 3

之所以发布此问题，是因为这个问题是我在 IE9 中寻求 DOMNodeInserted 失败帮助的地方，但请注意，此解决方案专门针对在使用 End Request 函数的 ASP.NET 上下文中使用 jQuery 的情况。您的里程可能会有所不同，等等......

基本上，我们将完全丢弃 DOMNodeInserted 并使用 End Request 来加载我们的事件处理程序：

OLD:

$(document).ready(function() {

$(document).bind('DOMNodeInserted', function(event){
My jQuery event handler...

 }); 
});

================= ==================

新：

function Ajax_EndRequest {
  function2();
}

function2 (a,b){
  My jQuery event handler...
}

$(document).ready(function(){
  add_endRequest(Ajax_EndRequest); //this is what actually invokes the function upon request end.

 My jQuery event handler...//REMOVED -- don't need this now
});

Answer 4

与 csuwldcat 描述的技术相同的技术已被制作成易于使用的 jQuery 插件（如果您喜欢的话）： https: //github.com/liamdanger/jQuery.DOMNodeAppear

Answer 5

尝试使用 customElements，但不适用于已经创建的元素！

customElements.define( 'insertion-triggerable', class extends HTMLElement {
    connectedCallback() {
        console.log( 'connected' )
    }

    disconnectedCallback() {
        console.log( 'disconnected' )
    }

    adoptedCallback() {
        console.log( 'adopted' )
    }
} );

let element = document.createElement( 'insertion-triggerable' );

或者

customElements.define( 'insertion-triggerable', class extends HTMLDivElement {
    // --||--
}, { extends: 'div' } );

let divElement = document.createElement( 'div', { is: 'insertion-triggerable' } );

Answer 6

如果您只想在 DOM 更改时触发事件，请执行以下操作：

var nodes=document.getElementsByTagName('*')||document.all;

function domchange(){
    alert('Hello');
}

window.setInterval(function(){
    var newnodes=document.getElementsByTagName('*')||document.all;
    if(newnodes!=nodes){
        nodes=newnodes;
        domchange();
    }
},1);