observer test

by forgetcolor

HTML

<div id="trackmychanges">starting text</div>
<button id="button">press to trigger change on text above</button>
<div id="status"></div>

JavaScript

// select the target node
var target = document.getElementById('trackmychanges');
 
// create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.type);
    $('#status').text("got a "+mutation.type+" mutation!");
    dd(mutation);
  });    
});
 
// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true };
 
// pass in the target node, as well as the observer options
observer.observe(target, config);

$('#button').click(function() {
  $('#status').text("changing...");
  setTimeout(function() {
  	$('#trackmychanges').text("new text "+Math.random());
  }, 200);
})

  function dd(variable, varName) {
        var varNameOutput;

        varName = varName || '';
        varNameOutput = varName ? varName + ':' : '';

        console.warn(varNameOutput, variable, ' (' + (typeof variable) + ')');
    }