Javascript DOM侦听器的实现

我认为没有DOM侦听器，所以我实现了自己的“重”侦听器：

function CvHelper(stackApi) {
  var that = this;

  // check if room is finished loading
  this.init = function() {
    if ($('#loading').length) {
      setTimeout(that.init, 1000);
    } else {
      console.log('Chatroom finished loading');

      that.postListener();
    }
  }
}

(function() {
  var stackApi = new StackApi();
  var cvHelper = new CvHelper(stackApi);
  cvHelper.init();
})();

我觉得这太糟糕了。所以我在这里搜索了一下然后出现了。但是，报告指出，它已被弃用

$("#someDiv").bind("DOMSubtreeModified", function() {
  alert("tree changed");
});

表示此事件已弃用，我们将使用什么替代

有替代品吗？
另外，它只需要在Chrome上工作，因为它是一个Chrome扩展。

如果您看一下：

它指出，关于DOMSubtreeModified，“它可能在对文档进行一次修改后被触发，或者在发生多次更改后，由实现自行决定触发。”

因此，如果您使用不同的MutationEvent，比如DOMNodeInserted，您可能会得到更确定的事件触发（在特定情况下，您只需向节点添加一个元素）

见下文：

$('body').prepend( $('<div id="cow">Hello</div>') );

$('#cow').bind("DOMNodeInserted",function(){ alert('hi'); } );

$('#cow').prepend( $("<div></div>") );

$（'body'）。前置（$（'Hello'）；
$（'cow'）.bind（“DOMNodeInserted”，function（）{alert（'hi'）；}）；
$（'#cow'）。前置（$（“”）；

顺便说一句，这是在铬中测试的

希望这有助于

更新： 或者，您可以在一个函数调用中添加多个事件类型。例如，为DOMNodeInserted、DOMNodeRemoved、DOMAttrModified、DOMCharacterDataModified添加四个事件处理程序，然后所有处理程序都调用单个处理程序

更新：我编写了一个小脚本，它实现了我在上一次更新中刚刚编写的内容：

$('body').prepend( $('<div id="cow">Hello</div>') );

/**
* This function registers event handlers which invoke the mutateHandler 
* handler when any of the MutationEvents are fired on a node: DOMNodeInserted, 
* DOMNodeRemoved, DOMAttrModified, DOMCharacterDataModified.
*
*/
var onMutate = function( mutateHandler ){

    var that = this;
    $(this).bind( "DOMNodeInserted", function( event ){ 
        mutateHandler.call( that, event ); 
    });
    $(this).bind( "DOMNodeRemoved", function( event ){ 
        mutateHandler.call( that, event ); 
    });
    $(this).bind( "DOMAttrModified", function( event ){ 
        mutateHandler.call( that, event );
    });
    $(this).bind( "DOMCharacterDataModified", function( event ){ 
        mutateHandler.call( that, event );
    });

};

onMutate.call( $('#cow')[0], function(){
    alert( $(this).attr('id') );
});


$('#cow').prepend( $("<div></div>") );
$('#cow').addClass( 'my_class' );

$（'body'）。前置（$（'Hello'）；
/**
*此函数注册调用mutateHandler的事件处理程序
*在节点上触发任何MutationEvents时的处理程序：DomainNodeInserted，
*DOMNodeRemoved、DOMAttrModified、DOMCharacterDataModified。
*
*/
变量onMutate=函数（mutateHandler）{
var=这个；
$（this）.bind（“DOMNodeInserted”，函数（事件）{
mutateHandler.call（即事件）；
});
$（this）.bind（“DOMNodeRemoved”，函数（事件）{
mutateHandler.call（即事件）；
});
$（this）.bind（“DOMAttrModified”，函数（事件）{
mutateHandler.call（即事件）；
});
$（this）.bind（“DOMCharacterDataModified”，函数（事件）{
mutateHandler.call（即事件）；
});
};
onMutate.call（$（'#cow'）[0]，function（）{
警报（$（this.attr（'id'））；
});
$（'#cow'）。前置（$（“”）；
$（'cow'）.addClass（'my#u class'）；

看起来它实际上只是在的工作草案中被弃用了，该草案提供了以下注释：

警告！MutationEvent接口是在DOM级别2中引入的 事件，但尚未完全和可互操作地实现 跨用户代理。此外，也有批评认为 根据设计，接口引入了性能和实现 挑战一个新的规范正在开发中，目的是 解决突变事件解决的用例，但更多 行为举止。因此，本规范描述了突变事件 用于参考遗留行为的完整性，但不推荐 使用MutationEvent接口和MutationNameEvent 接口

因此，如果我理解正确的话，“是否有替代品？”问题的答案是“没有，还没有。”

由于性能问题，目前不推荐使用。因此，请使用。在我的一个项目中，我使用变异观察者做了DOM变更监听器，效果非常好！为了进一步实施，这些链接将帮助您：

---

您所说的“在这种特定情况下，您只需向节点添加一个元素”是什么意思？我的意思是，只有在向该节点添加一个元素时，才会触发事件，如示例代码的第三行中所示。第三行是引发事件的原因。然而，更改属性不会导致事件触发。太好了，我将尝试一下。我不关心链接属性。它向我正在收听的DOM中添加了元素。我已经创建了我之前提到的方法，上面是。P.s。这里还有一个类似的问题