Lightweight event delegation
This is a fork of the popular delegate with some improvements:
- modern: ES2021, TypeScript, Edge 16+ (it uses
WeakMapandElement.closest()) - idempotent: identical listeners aren't added multiple times, just like the native
addEventListener - debugged (2d54c11, c6bb88c)
- supports
AbortSignal
If you need IE support, you can keep using delegate
npm install delegate-it
// This module is only offered as a ES Module
import delegate from 'delegate-it';delegate(document.body, '.btn', 'click', event => {
console.log(event.delegateTarget);
});delegate('.container', '.btn', 'click', event => {
console.log(event.delegateTarget);
});delegate(document.querySelectorAll('.container'), '.btn', 'click', event => {
console.log(event.delegateTarget);
});delegate(document.body, '.btn', 'click', event => {
console.log(event.delegateTarget);
}, true);
// Or equivalent:
delegate(document.body, '.btn', 'click', event => {
console.log(event.delegateTarget);
}, {
capture: true
});Note: the once option is currently not supported.
const controller = delegate(document.body, '.btn', 'click', event => {
console.log(event.delegateTarget);
});
controller.abort();const controller = new AbortController();
delegate(document.body, '.btn', 'click', event => {
console.log(event.delegateTarget);
}, {
signal: controller.signal,
});
controller.abort();If you're using TypeScript and have event types that are custom, you can override the global GlobalEventHandlersEventMap interface via declaration merging. e.g. say you have a types/globals.d.ts file, you can add the following.
interface GlobalEventHandlersEventMap {
'details:toggle': UIEvent;
}In the file that imports EventType, you will now be able to set the event type to 'details:toggled'.
import {EventType} from 'delegate-it';
const someEventType1: EventType = 'details:toggled'; // all good
const someEventType2: EventType = 'click'; // all good
const someEventType3: EventType = 'some-invalid-event-type'; // no good |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|
| Latest ✔ | Latest ✔ | Latest ✔ | No ✕ | Latest ✔ | Latest ✔ |
- select-dom - Lightweight
querySelector/Allwrapper that outputs an Array. - doma - Parse an HTML string into
DocumentFragmentor oneElement, in a few bytes. - Refined GitHub - Uses this module.