delegate-it

delegate-it

Lightweight event delegation

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

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

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();
});

Browser Support

Latest ✔	Latest ✔	Latest ✔	No ✕	Latest ✔	Latest ✔