-
-
Save leobm/80f7e3326ec315bf5df8365058554a5c 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