Skip to main content



Adds an event listener to an element with the ability to use event delegation.

Use EventTarget.addEventListener() to add an event listener to an element. If there is a target property supplied to the options object, ensure the event target matches the target specified and then invoke the callback by supplying the correct this context. Returns a reference to the custom delegator function, in order to be possible to use with off. Omit opts to default to non-delegation behavior and event bubbling.

const on = (el, evt, fn, opts = {}) => {
const delegatorFn = (e) => &&, e);
evt, ? delegatorFn : fn,
opts.options || false
if ( return delegatorFn;
const fn = () => console.log("!");
on(document.body, "click", fn); // logs '!' upon clicking the body
on(document.body, "click", fn, { target: "p" }); // logs '!' upon clicking a `p` element child of the body
on(document.body, "click", fn, { options: true }); // use capturing instead of bubbling