DEV Community

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

Posted on • Edited on

29 3 1 1

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!

AWS Q Developer image

Your AI Code Assistant

Automate your code reviews. Catch bugs before your coworkers. Fix security issues in your code. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE

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

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay