Lightweight and modern event delegation in the browser
npm install delegate-it[badge-gzip]: https://img.shields.io/bundlephobia/minzip/delegate-it.svg?label=gzipped
[link-bundlephobia]: https://bundlephobia.com/result?p=delegate-it
> Lightweight event delegation
This is a fork of the popular but abandoned delegate with some improvements:
- modern: ES2022, TypeScript, Edge 16+ (it uses WeakMap and Element.closest())
- idempotent: identical listeners aren't added multiple times, just like the native addEventListener
- debugged (2d54c11, c6bb88c)
- supports AbortSignal
``
npm install delegate-it
`js`
// This module is only offered as a ES Module
import delegate from 'delegate-it';
`js`
delegate('.btn', 'click', event => {
console.log(event.delegateTarget);
});
`js`
delegate('.btn', 'click', event => {
console.log(event.delegateTarget);
}, {
capture: true
});
Use this option if you don't want to have a global listener attached on html, it improves performance:
`js`
delegate('.btn', 'click', event => {
console.log(event.delegateTarget);
}, {
base: document.querySelector('main')
});
`js
const controller = new AbortController();
delegate('.btn', 'click', event => {
console.log(event.delegateTarget);
}, {
signal: controller.signal,
});
controller.abort();
`
`js`
delegate('.btn', 'click', event => {
console.log('This will only be called once');
}, {
once: true
});
`js
import {oneEvent} from 'delegate-it';
await oneEvent('.btn', 'click');
console.log('The body was clicked');
`
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.
`js`
interface GlobalEventHandlersEventMap {
'details:toggle': UIEvent;
}
In the file that imports EventType, you will now be able to set the event type to 'details:toggled'.
`js
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
`
- select-dom - Lightweight querySelector/All wrapper that outputs an Array.DocumentFragment
- doma - Parse an HTML string into or one Element`, in a few bytes.
- Refined GitHub - Uses this module.