Skip to content
DOM event delegation, in <1KB
Branch: master
Clone or download

readme.md

delegate-it (size) (status)

Lightweight event delegation

This is a fork of the popular delegate with some improvements:

  • modern: ES6, TypeScript, Edge 15+ (it uses WeakMap and Element.closest())
  • idempotent: identical listeners aren't added multiple times, just like the native addEventListener
  • debugged (2d54c11, c6bb88c)

If you need IE support, you can keep using delegate

Install

npm install delegate-it

Setup

const delegate = require('delegate-it');
import delegate from 'delegate-it';

Usage

Add event delegation

With the default base (document)

delegate('.btn', 'click', event => {
    console.log(event.delegateTarget);
});

With an element as base

delegate(document.body, '.btn', 'click', event => {
    console.log(event.delegateTarget);
});

With a selector (of existing elements) as base

delegate('.container', '.btn', 'click', event => {
    console.log(event.delegateTarget);
});

With an array/array-like of elements as base

delegate(document.querySelectorAll('.container'), '.btn', 'click', event => {
    console.log(event.delegateTarget);
});

Remove event delegation

With a single base element (default or specified)

const delegation = delegate(document.body, '.btn', 'click', event => {
    console.log(event.delegateTarget);
});

delegation.destroy();

With multiple elements (via selector or array)

Note: selectors are always treated as multiple elements, even if one or none are matched. delegate() will return an array.

const delegations = delegate('.container', '.btn', 'click', event => {
    console.log(event.delegateTarget);
});

delegations.forEach(function (delegation) {
    delegation.destroy();
});

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

Browser Support

Chrome logo Edge logo Firefox logo Internet Explorer logo Opera logo Safari logo
Latest ✔ Latest ✔ Latest ✔ No ✕ Latest ✔ Latest ✔

Related

  • select-dom - Lightweight querySelector/All wrapper that outputs an Array.
  • doma - Parse an HTML string into DocumentFragment or one Element, in a few bytes.
  • Refined GitHub - Uses this module.
You can’t perform that action at this time.