DEV Community

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

Posted on • Edited 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! 🌈

Links

MDN Article on addEventListener()


Check out more #JSBits at my blog, jsbits-yo.com. Or follow me on Twitter!

Top comments (5)

Collapse
 
salvadorweb89 profile image
Salvador Ruiz

Very usefull, thanks!

Collapse
 
naozumi520 profile image
Naozumi

Amazing, thanks!

Collapse
 
jyoung4242 profile image
Justin Young

this just saved me a ton of headaches

Collapse
 
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.

Collapse
 
vkrms profile image
Pavel M

wow dude that's pretty cool