javascript - 当元素的 innerHTML 改变时触发一个函数？

Question

我想在 div 元素的 innerHTML 发生变化时触发一个函数。

已使用 element.addEventListener('DOMCharacterDataModified', myFunction()); 进行测试，但它似乎无法正常工作。它在页面加载时触发一次但之后再也不会触发？请参阅下面的示例代码。

有人能解决我的任务吗？非常感谢任何帮助!

任务:

1. 我有一个空的 div。
2. 它会随机输入来自外部来源(我无法控制)的数据。
3. 每当 innerHTML 发生变化时，我都想触发 myFunction()。

---

我当前的示例代码:

var element = document.getElementById('div');

element.addEventListener('DOMCharacterDataModified', myFunction());

function myFunction() {
    console.log(element.innerHTML);
}

setTimeout(function(){
    element.innerHTML = 'Hello World!';
}, 1000);

setTimeout(function(){
    element.innerHTML = 'Hello Space!';
}, 2000);

setTimeout 可视化从外部源馈送的数据。

如果可能，它只需要是 JS，但如果真的需要，可以使用 jQuery。

---

提前致谢!

//电线

Answer 1

使用 DOMSubtreeModified 事件:

var element = document.getElementById('div');

element.addEventListener('DOMSubtreeModified', myFunction);

function myFunction(e) {
    console.log(element.innerHTML);
}

setTimeout(function(){
    element.innerHTML = 'Hello World!';
}, 1000);

setTimeout(function(){
    element.innerHTML = 'Hello Space!';
}, 2000);

<div id="div"></div>

顺便说一句，DOM 突变事件是 deprecated .使用 MutationObserver :

window.addEventListener('load', function () {
  var element = document.getElementById('div');

  var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
  var observer = new MutationObserver(myFunction);
  observer.observe(element, {
	  childList: true
  });

  function myFunction() {
    console.log(element);
    console.log(element.innerHTML);
  }

  setTimeout(function(){
    element.innerHTML = 'Hello World!';
  }, 1000);

  setTimeout(function(){
    element.innerHTML = 'Hello Space!';
  }, 2000);
});

<div id="div">

Raw snippet on GitHub