跨浏览器 Javascript 以提醒在 DIV 中修改 DOM？答案

【问题标题】：Cross-browser Javascript to alert on DOM being modified within a DIV?跨浏览器 Javascript 以提醒在 DIV 中修改 DOM？
【发布时间】：2014-03-26 11:55:45
【问题描述】：

我是一个基本的 Javascript 黑客，而不是高级程序员，我希望得到一些指点。

我正在使用 Javascript（或 JQuery）函数，该函数可以监视 DOM 并在指定 DIV 中的内容已更改时进行更改。我希望在变量中捕获这些新内容以进行进一步处理（但现在应该回显到 console.log 或 alert 以证明成功）。

DIV 是由单独的 AJAX 进程更新的内容，或者可能包含 iFrame，我无法完全控制这两者。内容可能会被多次更新，并且不频繁且非结构化。 DIV 的内容也可以改变格式并且可以包含任何类型的内容。

我相信我需要一个 JS 事件来处理这个问题（而不是任何基于间隔的检查），我一直在研究 DOMsubtreeModified 函数，但我不仅不能让它始终如一地工作，看起来这是跨浏览器不可靠，无论客户端如何，我都需要它来工作。

我是不是找错树了？这可能以跨浏览器的方式吗？我应该继续破解 DOMSubtreeModified 以尝试使其正常工作还是有更好的方法？

谢谢。

【问题讨论】：

DOM Mutation event in JQuery or vanilla Javascript的可能重复
stackoverflow.com/questions/2844565/… （我不确定这是否是严格的“重复”，但我认为它的意图非常相似；YMMV 与实际应用程序）
是的，这似乎是重复的 - 我只是没有以正确/相同的方式提出问题。无论如何，谢谢，它们是有用的指针。

标签： javascript jquery events dom javascript-events

【解决方案1】：

DOMSubtreeModified 是正确的事件。

这可能会对您有所帮助，我是在阅读您的问题后创建的。我认为它会做你想做的事。

<div class="change_event_box">
  1234
</div>

<script>
$(document).ready(function() {
  $('.change_event_box').bind("DOMSubtreeModified",function(){
    alert('changed');
  });

  setTimeout(function() {
    $('.change_event_box').text("4321");
  }, 5000);
});
</script>

http://jsfiddle.net/F4FMk/

【讨论】：