mdn divide event handling in three phases then why taget phase fire two time

Question

MDN doc explained event handling on all modern browsers handled in three phases which are:

           1.capturing phase -->(top most to target parent) 
           2.target phase -->(element on where event happened)
           3.the bubbling phase -->(target parent to top most element)

and after all this doc read what i understand is, these three phase are independent from each other but this demonstration confuse me. because here target event fire two times i did not understand why this is not fire only once or it fire with respect to capture and bubbling phase not independent.

Where did the source of your first image come from? It would be easier to answer your question if we can understand how the results in the screenshot were arrived at. — K Scandrett, Jul 18 '22 at 07:50
A better source than that MS article IMO (that article it's based on this SO answer), with more intuitive variable names, is this: https://stackoverflow.com/a/4616720/1544886 — K Scandrett, Jul 18 '22 at 08:00
There are two event listeners attached to each div, one for bubbling and the other for capturing. So you'll get two results at the target level, one from each. — K Scandrett, Jul 18 '22 at 08:06
@KScandrett thanks sir i got it. it seems MDN implementation mistake. because if mdn use one more (third) event listener to log the target event fire then it may be solve the problem what's your thought? — reradih, Jul 18 '22 at 08:31
If they add a third event listener then you'll see the event fired 3 times — K Scandrett, Jul 18 '22 at 09:14
@KScandrett sir there is miss understanding. i mean if in MDN doc three different event listener used for each phase fire log print. in that case target event log removed from another two. i want to know that is it mistake made by MDN — reradih, Jul 18 '22 at 15:46
I understand what you're looking for. Yes, the demo could be coded differently so that the target phase only appears once. But that's not a mistake, just not something they were aiming for in the code. Personally I think it's more accurate the way they did it because there are two independent event handlers that overlap on the target element, so that gets logged twice. But that's only my opinion of course — K Scandrett, Jul 19 '22 at 02:12
Just re-reading your question. You said the 3 phases are independent of each other but that's not true. To reach phase 2 you have to have phase 1. If you stop event propagation (https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation), you'll never reach any later phases — K Scandrett, Jul 19 '22 at 02:27

score 0 · Accepted Answer · answered Jul 18 '22 at 09:17

There are two event listeners attached to each div in the code, one for bubbling and the other for capturing. So you'll get two results at the target level, one from each event.

Normally when writing code you'd choose to add an event listener for either bubbling or capturing, not both of them, so you'd only see only one event fire at the target level.

mdn divide event handling in three phases then why taget phase fire two time

1 Answers1