Add event listener to element

JavaScript, Browser, Event · Oct 21, 2020

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.
  • Omit opts to default to non-delegation behavior and event bubbling.
  • Returns a reference to the custom delegator function, in order to be possible to use with off.
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

More like this

  • JavaScript Event Handling

    Event handling needs to be done right in JavaScript. Pick up some tips and tricks to create a better user experience.

    Collection · 15 snippets

  • Copy to clipboard

    Copies a string to the clipboard. Only works as a result of user action (i.e. inside a click event listener).

    JavaScript, Browser · Jan 11, 2022

  • Add multiple listeners

    Adds multiple event listeners with the same handler to an element.

    JavaScript, Browser · Oct 22, 2020

  • Add event listener to all targets

    Attaches an event listener to all the provided targets.

    JavaScript, Browser · Apr 22, 2021