Javascript Eventlistener for Update / Change on Element / innerText

Question

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

Example:

12345

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

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!

Answer 1

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

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

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

Answer 2

Just in case anyone is looking for a way to do this for multiple nodes. 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);
});