CODEWITHSUNDEEP
javascriptevent-handlingdom-eventsevent-bubblingevent-capturing
Yogesh Jagdale
Yogesh Jagdale

Reputation: 730

Event capturing phase is not working as expected on html element which don't have children nodes

Lets consider following html

<div id='outer'>
    Outer Tag
    <div id='inner'>Inner Tag</div>
</div>

Applying events

var outer = document.getElementById('outer'),
    inner = document.getElementById('inner');

outer.addEventListener('click',function(){
   console.log('Outer Clicked!')
}, false);

outer.addEventListener('click',function(){
   console.log('Outer Captured!')
}, true); // event capture flag set to true

inner.addEventListener('click',function(){
   console.log('Inner Clicked!')
}, false);

So now, we have applied events and as expected when we clicked on inner element the out put should be as follow

Outer Captured!
Inner Clicked!
Outer Clicked!

But if we removed inner span from above html then it seems like capturing phase is fired after bubbling phase as follow

Outer Clicked!
Outer Captured!

Can anybody explain why this happens?

Upvotes: 3

Views: 1367

Answers (1)

Bergi
Bergi

Reputation: 664970

On the target element there is no distinction made between bubbling and capturing - the event is in the target phase. All event handlers registered on it will be fired, and they will be fired in the order they were installed.

Upvotes: 2

Related Questions