@skax/delegate

Lightweight event delegation.

Install

You can get it on npm.

npm install @skax/delegate --save

Setup

Node (Browserify)

var delegate = require("@skax/delegate");

Browser (Standalone)

<script src="dist/delegate.js"></script>

Usage

Add event delegation

With the default base (document)

delegate(
    ".btn",
    "click",
    function (e) {
        console.log(e.delegateTarget);
    },
    false,
);

With an element as base

delegate(
    document.body,
    ".btn",
    "click",
    function (e) {
        console.log(e.delegateTarget);
    },
    false,
);

With a selector (of existing elements) as base

delegate(
    ".container",
    ".btn",
    "click",
    function (e) {
        console.log(e.delegateTarget);
    },
    false,
);

With an array/array-like of elements as base

delegate(
    document.querySelectorAll(".container"),
    ".btn",
    "click",
    function (e) {
        console.log(e.delegateTarget);
    },
    false,
);

Remove event delegation

With a single base element (default or specified)

const delegation = delegate(
    document.body,
    ".btn",
    "click",
    function (e) {
        console.log(e.delegateTarget);
    },
    false,
);

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",
    function (e) {
        console.log(e.delegateTarget);
    },
    false,
);

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

Browser Support

| | | | | | | | :-------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------: | | Latest ✔ | Latest ✔ | Latest ✔ | 9+ ✔ | Latest ✔ | Latest ✔ |