Observe element mutations

JavaScript, Browser, Event · Oct 22, 2020

Creates a new MutationObserver and runs the provided callback for each mutation on the specified element.

const observeMutations = (element, callback, options) => {
  const observer = new MutationObserver(mutations =>
    mutations.forEach(m => callback(m))
  );
  observer.observe(
    element,
    Object.assign(
      {
        childList: true,
        attributes: true,
        attributeOldValue: true,
        characterData: true,
        characterDataOldValue: true,
        subtree: true,
      },
      options
    )
  );
  return observer;
};
const obs = observeMutations(document, console.log);
// Logs all mutations that happen on the page
obs.disconnect();
// Disconnects the observer and stops logging mutations on the page

More like this

  • Handle click outside

    Runs the callback whenever the user clicks outside of the specified element.

    JavaScript, Browser · Jan 6, 2021

  • Listen for an event only once

    Adds an event listener to an element that will only run the callback the first time the event is triggered.

    JavaScript, Browser · Oct 22, 2020

  • Handle user input change

    Runs the callback whenever the user input type changes (mouse or touch).

    JavaScript, Browser · Oct 21, 2020