用于更新/更改元素/内部文本的 Javascript 事件监听器答案

【问题标题】：Javascript Eventlistener for Update / Change on Element / innerText用于更新/更改元素/内部文本的 Javascript 事件监听器
【发布时间】：2014-01-04 00:15:53
【问题描述】：

是否有一个 eventListener 只是在检查 innerText 的变化？

例子：

12345

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

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

对不起，我的英语不好，谢谢！

【问题讨论】：

您的问题是重复的吗？点此查看：stackoverflow.com/questions/4979738/…
不是，因为我使用的是纯 javascript 而不是 jquery 或任何其他框架。使用 jquery 会容易得多。

标签： javascript onchange addeventlistener event-listener

【解决方案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);

FIDDLE

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

【讨论】：

【解决方案2】：

以防万一有人正在寻找一种方法来为多个节点执行此操作。 fiddle Further reading

HTML

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

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：