npm: npm i disco
cdn: https://unpkg.com/disco
Easy and universal way to react to elements being disconnected
and connected
via native DOM events.
Observe via a direct node reference, an array of nodes or a string selector that internally makes use of Element.matches(selectorString)
. It's recommended to keep the observed scope as small as possible for the best performance.
import { observe } from 'disco';
/**
* Observe one specific div element
*/
const div = document.createElement('div');
observe(div);
div.addEventListener('connected', () => console.log('connected!'));
document.body.append(div);
/******************************************************************/
/**
* Observe all (future) h1 elements.
*/
observe('h1');
const firstH1 = document.createElement('h1');
const lastH1 = document.createElement('h1');
firstH1.addEventListener('connected', () => console.log('connected!'));
lastH1.addEventListener('connected', () => console.log('connected!'));
document.body.append(firstH1, lastH1);
/******************************************************************/
/**
* Observe all section elements in the document for removal.
*/
const sections = document.querySelectorAll('section');
observe(...sections);
[...sections].forEach(section =>
section.addEventListener('disconnected', () => console.log('🕺')))
- observe(...nodesOrSelectors)
Observe a node, array of nodes or an element selector for dis-connected events.
- unobserve([...nodesOrSelectors])
Unobserve for dis-connected events.
Observe a node, array of nodes or an element selector for dis-connected events.
Kind: global function
Param | Type |
---|---|
...nodesOrSelectors | Node | String |
Unobserve for dis-connected events.
Kind: global function
Param | Type |
---|---|
[...nodesOrSelectors] | Node | String |