Change third argument of Element#addEventListener

APIs
#1

As of right now the Element#addEventListener 's third argument is used to set the useCapture

Now the reason I’d like it changed is for Throttling/debouncing, therefore:

el.addEventListener('mousemove', cb, {
 capture: true, // way of still being able to pass usecapture
 throttle: 200, // 200 milliseconds
 debounce: 200, // 200 milliseconds
});

So because we can’t break the web it accepts 2 types the boolean for the useCapture and the object shown above, therefore we can still do:

el.addEventListener('mousemove', cb, true);

The third argument as an object will also allow for any future things we’d like to add as well.

#2

But that suggestion also includes a native debouncing/throttling function in browsers. Is this what you want?

The current solution is to use a debounce function as the event handler – which works and is highly flexible, as you can also use any other method instead.

el.addEventListener( 'mousemove', _.debounce( function( event ) {
    /* the event handler */
} ), true );

Why do you think a change is necessary here?

#3

It’s a pattern that’s widely used, why not have it natively implemented. Which browsers could optimize for.

#4

See EventListenerOptions for a similar specific proposal which has a fair amount of support. I was also thinking of a rate (throttle) option, but I’m not sure about it. I’d probably want to see some data on what savings would be possible in practice.

1 Like