diff options
Diffstat (limited to 'node_modules/delegate-it/readme.md')
| -rw-r--r-- | node_modules/delegate-it/readme.md | 114 |
1 files changed, 114 insertions, 0 deletions
diff --git a/node_modules/delegate-it/readme.md b/node_modules/delegate-it/readme.md new file mode 100644 index 00000000..e5fbe735 --- /dev/null +++ b/node_modules/delegate-it/readme.md @@ -0,0 +1,114 @@ +# delegate-it [![][badge-gzip]][link-bundlephobia] + +[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`](https://github.com/zenorocha/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](https://github.com/fregante/delegate-it/commit/2d54c1182aefd3ec9d8250fda76290971f5d7166), [c6bb88c](https://github.com/fregante/delegate-it/commit/c6bb88c2aa8097b25f22993a237cf09c96bcbfb8)) +- supports [`AbortSignal`](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) + +## Install + +``` +npm install delegate-it +``` + +```js +// This module is only offered as a ES Module +import delegate from 'delegate-it'; +``` + +## Usage + +### Add event delegation + +```js +delegate('.btn', 'click', event => { + console.log(event.delegateTarget); +}); +``` + +### With listener options + +```js +delegate('.btn', 'click', event => { + console.log(event.delegateTarget); +}, { + capture: true +}); +``` + +### On a custom base + +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') +}); +``` + +### Remove event delegation + +```js +const controller = new AbortController(); +delegate('.btn', 'click', event => { + console.log(event.delegateTarget); +}, { + signal: controller.signal, +}); + +controller.abort(); +``` + +### Listen to one event only + +```js +delegate('.btn', 'click', event => { + console.log('This will only be called once'); +}, { + once: true +}); +``` + +### Listen to one event only, with a promise + +```js +import {oneEvent} from 'delegate-it'; + +await oneEvent('.btn', 'click'); +console.log('The body was clicked'); +``` + +## TypeScript + +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 +``` + +## Related + +- [select-dom](https://github.com/fregante/select-dom) - Lightweight `querySelector`/`All` wrapper that outputs an Array. +- [doma](https://github.com/fregante/doma) - Parse an HTML string into `DocumentFragment` or one `Element`, in a few bytes. +- [Refined GitHub](https://github.com/sindresorhus/refined-github) - Uses this module. |
