Question

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

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

任何人都有解决我的任务的方法吗？非常感谢任何帮助！

任务：

我有一个空div。
随机提供来自外部来源的数据（我无法控制）。
每当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。

提前致谢！

// wirrew

Answer 1

使用DOMSubtreeModified事件：

＆＃13;

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);

＆＃13;

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

＆＃13;

BTW，DOM突变事件为deprecated。使用MutationObserver：

＆＃13;

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);
});

＆＃13;

<div id="div">

＆＃13;

Raw snippet on GitHub

Answer 2

注意：可能不是最好的解释，请添加您的知识，以使其更清晰。

如果您愿意使用元素属性，那么有一种方法可以创建自定义元素并根据需要添加Observers属性。您可以在attributeChangedCallback为监听器添加自定义代码。

Custom Elements属于Web Components，受Chrome，Opera和Safari支持。这是解释它们的一切的链接。 https://developer.mozilla.org/en-US/docs/Web/Web_Components/Custom_Elements

你有可能修改div元素的观察者，但我不知道这些，你可能需要深入挖掘，如果你选择这样做的话。

由于您正在尝试收听单个元素的innerHTML，因此最好只创建一个自定义元素，例如代码段中的自定义元素。

＆＃13;

class ObservableDiv extends HTMLElement {
  // Monitor the 'name' attribute for changes.
  static get observedAttributes() {return ['name']; }

  // Respond to attribute changes.
  attributeChangedCallback(attr, oldValue, newValue) {
    if (attr == 'name') {
      this.textContent = `HELLO, ${newValue}`;
    }
  }
}

// Define the new element
customElements.define('observable-div', ObservableDiv);

setTimeout(() => { document.getElementById("change").setAttribute("name", "I CHANGED A LOTTTTTTTTTTT") }, 1000)

＆＃13;

<observable-div id="change" name="BEFORE CHANGING"></observable-div>

＆＃13;

PS ：这可能不是一个正确的答案，但我发布这个是因为这个策略更好地服务于我，而不是依赖于曾经偶尔工作但从不一贯工作的子树监听器。唯一的下降是这没有良好的浏览器支持。可能已经有一些好的polyfills。

当元素的innerHTML发生变化时触发一个函数？

2 个答案: