Opera 的 DOM 更改事件答案

【问题标题】：DOM change event for OperaOpera 的 DOM 更改事件
【发布时间】：2012-01-23 01:03:42
【问题描述】：

到目前为止，我找到了如何在 Chrome 中执行此操作，DOMSubtreeModified 事件： Is there a JavaScript/jQuery DOM change listener?

显然它也适用于 Firefox 和 IE 9。

您知道在其他浏览器（例如 Opera）中检测 DOM 更改的解决方案吗？如果 IE 可能是旧版本，因为我确信上面的事件在 IE 6-7-8 中不起作用......

或者你知道我可以使用的其他事件吗？我基本上是在寻找一种方法来检测某些元素是否已通过 ajax 请求插入到文档中......

【问题讨论】：

标签： javascript jquery dom dom-events opera

【解决方案1】：

Opera 支持 DOMNodeInserted 和 DOMNodeRemoved 突变事件。我进行了测试，他们也在 Firefox 和 G. Chrome 上工作。

$(document).bind("DOMNodeInserted, DOMNodeRemoved", function() {
    alert("DOM changed");
});

如果您针对多个浏览器，也许您可以检查Mordenizr 是否有任何对 DOM 突变事件支持的检测，它可以帮助您简化这些决策。

【讨论】：

我无法在 IE、上网本上测试它；）
DOMSubtreeModified 在 Opera 中不被支持，我建议你避免使用它。这两种说法的一个原因是：它确实会损害性能。跟踪和收听文档中发生的所有事情有时会减慢您的应用程序的速度。 DOMNodeInserted 和 DOMNodeRemoved 也不是完全没有性能问题，所以如果你可以改变你的架构并避免它们，它可能会更好。（这些事件在下一个 DOM 事件规范中已弃用）。

【解决方案2】：

onreadystatechange 将在 IE8 及以下版本中工作。必须通过 htc 将 DHTML 行为附加到元素，但 htc 文件不必存在：

if (!!document.addEventListener)
  {
  $(document.documentElement).get(0).addEventListener("DOMNodeInserted", bar, false);
  }
else
  {
  $(document.documentElement).get(0).addBehavior("foo.htc");
  $(document.documentElement).get(0).attachEvent("onreadystatechange", bar);
  }

【讨论】：