DEV Community

Everything about Event Handlers and Event Propagation

Ruphaa on February 01, 2019

This has been written over a hundred times before and probably holds more than a hundred answers on StackOverflow. But over time, going through dif...
Collapse
 
ssimontis profile image
Scott Simontis

Very small quirk, but when dealing with scroll events, make sure to pass {passive: true} as the options argument after the callback method. Otherwise, the browser is waiting for your event handler to determine if it should allow the scroll to happen, or if your handler is going to halt it. 99% of the time the intention is never to prevent scrolling, so it can improve performance if you have a lot of scroll listeners. This may have already become default behavior in the newest versions of Chrome.

There's also a once option you can pass in that object which will unbind the event listener as soon as it responds to a single instance of the event.

Collapse
 
flexdinesh profile image
Dinesh Pandiyan • Edited

This is an excellent write-up. Thanks @ruphaa.

I used to pass anon handlers to events and didn't know the implications until someone pointed it out. It's a bad practice and thanks for pointing it out in the post.

Collapse
 
ruphaa profile image
Ruphaa

Thanks Dinesh ☺️

Even I used to do that before, I never knew there will be an impact.

Collapse
 
ayaanraj profile image
ayaanraj

great write-up.

Collapse
 
ruphaa profile image
Ruphaa

Thanks :)