javascript - DOM 监听器的实现

Question

我以为没有 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();
})();

我认为这很糟糕。所以我在这里进行了搜索，然后弹出了this question。然而 last comment on the accepted question 声明它已被弃用。

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

w3.org/TR/DOM-Level-3-Events/#event-type-DOMSubtreeModified says this event is deprecated, what would we use instead?

有替代品吗？
附:它只需在 Chrome 上运行，因为它是 Chrome 扩展。

Answer 1

Mutation Event 由于性能问题目前已被弃用。因此，请使用 Mutation Observer 。我在我的一个项目中使用 Mutation Observer 做了 DOM 更改监听器，效果非常好!为了进一步实现，这些链接将为您提供帮助:

1. http://gabrieleromanato.name/jquery-detecting-new-elements-with-the-mutationobserver-object/
2. https://github.com/kapetan/jquery-observe
3. Is there a JavaScript/jQuery DOM change listener?