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

FIDDLE

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

Answer 2

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

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

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

Answer 3

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

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

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

3 个答案:

HTML

JS