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?

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.