signalizejs/mutation-observer

Watch for changes being made to the DOM tree of the root or selected element.

Installation

const {
	observeMutations,
	createMutationObserver
} = await signalize.resolve('mutation-observer');

API

observeMutations

Signalize starts one mutation observer automatically for and watches the configured root for childList and subtree changes.

Observe mutations and provide a callback and options:

  • initOptions are identical to mutation observer options.
  • callback: function that receives a list of mutations based on configuration.
import Signalize from 'signalizejs';

const { observeMutations } = new Signalize();

const element = document.querySelector('#element');

// Observe mutation for element, dispatch event to configured Signalize root.
const observer = observeMutations(element);

// Observe mutation for element, do not dispatch event, call callback instead.
const observer = observeMutations(element, (mutations) => {
	// Do something when there is a mutation on the selected element
});

Dispatched events

You can listen to the following events through the on function:

  • dom:mutation - This event is fired on every DOM mutation.
  • dom:mutation:node:added - This event is fired when any node is added.
  • dom:mutation:node:moved - This event is fired when any node is moved in the DOM.
  • dom:mutation:node:removed - This event is fired when any node is removed.