Events capture and bubble phases

Hi to all,

I learned about events in JS from MDN. And when I reached the topic about capturing and bubbling phases, there is this site that explains the subject : https://www.quirksmode.org/js/events_order.html

But, I’m a little confused about one example.

element2 is set for bubbling way because of is third argument.

My understanding : Why the handler of the element2 isn’t executed in first ? Due to what I understood, in bubbling phase, the event is propaged from the down to the up.
But, why it’s tell that when element2 is clicked, " The click event starts in the capturing phase. The event looks if any ancestor element of element2 has a onclick event handler for the capturing phase."

Thanks in advance for explaining me a little more deep this example and more generally this notion.

Hello @hotman1313a

The click event starts in the capturing phase. The event looks if any ancestor element of element2 has a onclick event handler for the capturing phase.

since element1.addEventListener(‘click’,doSomething2,true) the true here make element1 event in the capture mode which make dosomething2 excuted first

in the other example element1.addEventListener(‘click’,doSomething2,false) which mean it in bubble mode so it does not excute till the mode change to the bubble which make element2 event excute first and the mode change to bubble then it look for ancestor so it then excute element1 event

hope that help and have a nice day :slight_smile:

Your response was very helpful for me, thanks.
I made some test code for well understanding this feature. It will help me in React events

thanks

you very welcome @hotman1313a and good luck with react

and have a nice day :slight_smile: