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

问题描述：

是否有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

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

JS

JS

相关推荐