Created
November 17, 2015 20:44
-
-
Save psyrendust/a33c153ba1ce9867a53a to your computer and use it in GitHub Desktop.
Add and remove MutationObserver events to a registered DOM element.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* @typedef MutationCallback | |
* @param {NodeList} addedNodes A NodeList of elements that have been added to the DOM. | |
* @param {NodeList} removedNodes A NodeList of elements that have been removed from the DOM. | |
*/ | |
/** | |
* Add a MutationObserver to a DOM node. | |
* | |
* @example | |
* | |
* <!DOCTYPE html> | |
* <html> | |
* <body> | |
* <div id="container"></div> | |
* <script> | |
* var container = document.querySelector('#container'); | |
* // add listener | |
* var removeElementChange = addElementChange(container, function changeHappened(addedNodes, removedNodes) { | |
* if (addedNodes.length) { | |
* // something was added | |
* } | |
* if (removedNodes.length) { | |
* // something was removed | |
* } | |
* // remove the listener | |
* removeElementChange(); | |
* }); | |
* </script> | |
* </body> | |
* </html> | |
* | |
* @see https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver | |
* | |
* @param {Node} element The DOM node to listen to for mutation events. | |
* @param {MutationCallback} callback The callback function to fire after a mutation occurs. | |
* @return {Function} A function to call to remove the MutationObserver | |
*/ | |
;(function IIFE(scope) { | |
var MutationObserver = scope.MutationObserver || scope.WebKitMutationObserver, | |
function addElementChange(element, callback) { | |
if (MutationObserver) { | |
// IE 11+, no Android support | |
var observer = new MutationObserver(function mutationObserver(mutations, observer) { | |
if (mutations[0].addedNodes.length || mutations[0].removedNodes.length) { | |
callback(mutations[0].addedNodes, mutations[0].removedNodes); | |
} | |
}); | |
observer.observe(element, { | |
childList: true, | |
subtree: true | |
}); | |
return function removeElementChange() { | |
observer.disconnect(); | |
}; | |
} | |
} | |
scope.addElementChange = addElementChange; | |
})(window); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment