Using event listener should we use useCapture as false to support old browser or it will be used as default for every browser

Question

I am making a website for an organization who has diverse clients in different countries. How should I use an event listener

document.addEventListener('click', this.handleClickOutsideOption)

or

document.addEventListener('click', this.handleClickOutsideOption, false)

to support a vast diversity of clients

Answer 1

As mentioned in the docs:

Note: useCapture has not always been optional. Ideally, you should include it for the widest possible browser compatibility.

So yes, you should set it to false to support a vast diversity of clients.

Also, you need to know when you might want to set it to true. Let's say you are listening for blur event on a single input textbox, then you can keep it as false like:

const blog = document.querySelector('#blog');
blog.addEventListener('blur', function (event) {
    // Your logic here...
}, false);

But, if you want to listen to all blur events in the document, then you should set it to true like:

document.addEventListener('blur', function (event) {
    // Your logic here...
}, true);

As, setting it to true help us to take advantage of event bubbling for events that otherwise don't support it like focus, blur, etc. Basically it is false for most used events, thus this param is optional in modern browsers and its defaults to false.