DEV Community

Cover image for addEventListener "once"
JS Bits with Bill
JS Bits with Bill

Posted on • Updated on


addEventListener "once"

If you want to add an event callback but have it run only once, you can simply use the once option in the method's options object:

  document.body.addEventListener('click', () => {
    console.log('I run only once! πŸ˜‡');
  }, { once: true });
Enter fullscreen mode Exit fullscreen mode

This prevents the need to otherwise immediately remove the event listener after the callback first fires (which I've been guilty of!):

  document.body.addEventListener('click', cb);

  function cb() {
    console.log('Hi! πŸ‘‹');
    document.body.removeEventListener('click', cb);
Enter fullscreen mode Exit fullscreen mode

The more you know! 🌈


MDN Article on addEventListener()

Check out more #JSBits at my blog, Or follow me on Twitter!

Top comments (4)

salvadorweb89 profile image
Salvador Ruiz

Very usefull, thanks!

naozumi520 profile image

Amazing, thanks!

asosjamesinnes profile image
James Innes

Keep in mind it's best practice to explicitly remove them in React (and other frameworks) to ovoid memory leaks where they might not have been removed after the callback has finished and the component has already gone through the mount/unmount lifecycle regardless.

vkrms profile image
Pavel M

wow dude that's pretty cool

11 Tips That Make You a Better Typescript Programmer


1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields


Read the whole post now!