用于更新/更改Element / innerText的Javascript Eventlistener

Question

是否有一个eventListener只检查innerText的更改？

例：

12345

我只想检查“12345”是否正在改变其他类似“23415”的内容。

没有“点击”事件会出现或其他任何事情。 我没有机会查看来自跨度更新的代码。 所以我真的只能从span元素的变化中获取事件但我没有任何线索如何。

抱歉我的英文不好，谢谢！

Answer 1

看看MutationObserver 。 使用它，您可以监听观察元素的characterData 。 例：

HTML

<span class="observable" contenteditable="true">12345</span>

JS

var observables = document.querySelector('.observable');

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation);
  });    
});

var config = {characterData: true, subtree: true};
observer.observe(observables, config);

小提琴

请注意， subtree必须为true因为文本实际上是被观察元素的子元素。

Answer 2

如果通过innerHTML属性更新文本，则接受的答案可能不适用于所有浏览器。 在这种情况下，Firefox（截至28）将其视为childList事件类型，而Chrome（截至33）将其视为characterData事件类型。 我的猜测是Chrome检查正在更新的子节点是否是文本节点。

如果通过用户输入更新文本（如示例中的via contenteditable ，Firefox将触发characterData突变事件。

总之，如果你想观察Javascript更新元素的innerHTML ，请确保将childList:true添加到MutationObserverInit对象以与Firefox兼容。

Answer 3

以防万一有人正在寻找一种方法来为多个节点执行此操作。 小提琴 进一步阅读

HTML

<span class="observable" contenteditable="true">13436</span>
<span class="observable" contenteditable="true">13235</span>

JS

var observables = document.querySelectorAll('.observable');
console.log(observables);
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation);
  });
});

var config = {
  characterData: true,
  subtree: true
};
observables.forEach(function(node) {
  observer.observe(node, config);
});