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!

SurveyJS custom survey software

Simplify data collection in your JS app with a fully integrated form management platform. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more. Integrates with any backend system, giving you full control over your data and no user limits.

Learn more

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

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

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

Okay