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?
