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 });

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);
  }

The more you know! 🌈

Links

MDN Article on addEventListener()

---

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

Comments

[Salvador Ruiz]

Very usefull, thanks!

[Naozumi]

Amazing, thanks!

[Justin Young]

this just saved me a ton of headaches

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

[Pavel M]

wow dude that's pretty cool