用于更新/更改元素/innerText的Javascript Eventlistener

是否有一个eventListener正在检查innerText的更改

例如：

12345

我只是想看看“12345”是否正在变为“23415”之类的内容

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

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

查看下面的链接。使用它，您可以收听观察到的元素的

characterData

的变化。例如：

HTML

---

请注意，

子树

必须为

true

，因为文本实际上是观察到的元素的子元素。

如果通过

innerHTML

属性更新文本，则接受的答案可能无法在所有浏览器上使用。在这种情况下，Firefox（截至28日）将其视为

childList

事件类型，而Chrome（截至33日）将其视为

characterData

事件类型。我猜Chrome会检查正在更新的子节点是否是文本节点

如果文本是通过用户输入更新的（如通过示例中的

contenteditable

），Firefox将触发

characterData

突变事件

---

总之，如果您希望监视Javascript更新元素的

innerHTML

，请确保将

childList:true

添加到您的对象中，以便与Firefox兼容。

以防有人想办法对多个节点执行此操作

HTML

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

---

你的问题是重复的吗？检查这里看看：它不是，因为iam使用纯javascript，而不是jquery或任何其他框架。使用jquery会容易得多。

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

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