用于更新/更改Element / innerText的Javascript Eventlistener [英] Javascript Eventlistener for Update / Change on Element / innerText

问题描述

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

Is there a eventListener who is just checking the changes of an innerText?

示例：

12345

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

I just want to check if "12345" is changing to something else like "23415".

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

There is no "click" event that will comes up or anything else. I don't have the chance to go through the code where the updates from the span's are coming. So I really can just only grab the event from the changes in the span element but I don't have any clue how.

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

Sorry for my bad English and thanks!

推荐答案

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

Check out the MutationObserver. Using it you can listen to changes of the observed element's characterData. Example:

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

JS

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

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

Note that subtree has to be true because the text actually is a child element of the observed element.

这篇关于用于更新/更改Element / innerText的Javascript Eventlistener的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！