用于更新/更改元素/innerText 的 Javascript 事件侦听器

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因为文本实际上是被观察元素的子元素。