re: A Guide to Handling Browser Events VIEW POST


Thanks for the article, Sarah.
One question about the browser events bothers me for some time. You mentioned the third parameter useCapture when adding a listener to a DOM node. When readng fellow developers code sometimes I see boolean values true/false, sometimes objects {useCapture: true}. What's the difference between them? And what was the purpose to implement both options in browsers if there is no difference between them?


Sarah mentions it in the article. 😀

"The difference between bubbling and capturing is that in the bubbling phase, events propagate outwards. That is, the handler on the innermost element gets triggered first, then the parent all the way up.

In capturing, the reverse occurs. The handler on the outermost element is triggered first and then the child handler all the way down to the element where the event occurred. "


I mean there are two ways to add event listener in capture phase:

  1. node.addEventListener('click', e => console.log(e.eventPhase), true);
  2. node.addEventListener('click', e => console.log(e.eventPhase), {capture: true});

The result will be the same.
So my question was: is there any difference in these statements or they do exactly the same thing?

Hi Eugene.

They do exactly the same thing. true is a shorthand for {capture: true}.

Thanks for reading my article.

Ahh, sorry misunderstood what you were asking. 🙃 I believe Sarah just answered you.

code of conduct - report abuse