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

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.

CodePudding user response：

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.