Menu

gitpiper

on javascript Code Snippet in 2022

browsereventintermediate

Last Updated: 25 September 2022

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.target.matches(opts.target) && fn.call(e.target, e); el.addEventListener( evt, opts.target ? delegatorFn : fn, opts.options || false ); if (opts.target) 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

javascript snippet similar to on For You in September 2022

Subscribe to our Newsletter

Subscribe to get resources directly to your inbox. You won't receive any spam! ✌️

© 2022 GitPiper. All rights reserved

Rackpiper Technology Inc

Company

About UsBlogContact

Subscribe to our Newsletter

Subscribe to get resources directly to your inbox. You won't receive any spam! ✌️