当元素的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突变事件。使用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">

GitHub上的原始代码段