Фаза захвата событий не работает должным образом для элемента HTML, у которого нет дочерних узлов

Question

Давайте рассмотрим следующие HTML

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

Применение событий

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);

Итак, теперь мы применили события и, как и ожидалось, когда мы нажали на inner element выход должен быть следующим

Outer Captured!
Inner Clicked!
Outer Clicked!

Но если мы удалили inner span сверху html тогда кажется, что фаза захвата запускается после фазы барботажа следующим образом

Outer Clicked!
Outer Captured!

Кто-нибудь может объяснить, почему это происходит??

Answer 1

В целевом элементе не делается различий между всплытием и захватом - событие находится в целевой фазе. Все обработчики событий, зарегистрированные на нем, будут запущены, и они будут запущены в порядке их установки.