DEV Community

Discussion on: A Guide to Handling Browser Events

Collapse
 
nickytonline profile image
Nick Taylor

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

Collapse
 
karataev profile image
Eugene Karataev

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?

Thread Thread
 
sarah_chima profile image
Sarah Chima

Hi Eugene.

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

Thanks for reading my article.

Thread Thread
 
nickytonline profile image
Nick Taylor

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