Bubbling i przechwytywanie za pomocą addEventListener

Question

Niedawno odkryłem różnicę między propagowaniem bąbelków i przechwytywaniem zdarzeń DOM, przy użyciu javascript. Teraz rozumiem, jak to działa, ale znalazłem dziwną sytuację i chciałbym wiedzieć, dlaczego tak się dzieje.

Zgodnie z Quirks mode propagacja zdarzenia rozpoczyna się od przechwytywania na zewnętrznym elemencie div, osiąga dno, a następnie bąbelki do góry. Problem polegał na tym, że zacząłem wykonywać pewne testy.

Na tej pierwszej, wszystko działa zgodnie z oczekiwaniami:

<div id="out"> 
    <div id="in"> 
     Click This!! 
    </div> 
</div> 
<script type="text/javascript"> 
    document.getElementById('out').addEventListener('click', function(){ 
     alert('capture out'); 
    }, true); 
    document.getElementById('in').addEventListener('click', function(){ 
     alert('capture in'); 
    }, true); 
    document.getElementById('out').addEventListener('click', function(){ 
     alert('bubble out'); 
    }, false); 
    document.getElementById('in').addEventListener('click', function(){ 
     alert('bubble in'); 
    }, false); 
</script> 

Jeśli klikniesz tekst, alarmy go „uchwycić się”, „przechwytywanie w”, „bańka” i „bańki out”. Problemem jest za pomocą następującego kodu:

<div id="out"> 
    <div id="in"> 
     Click This!! 
    </div> 
</div> 
<script type="text/javascript"> 
    document.getElementById('out').addEventListener('click', function(){ 
     alert('bubble out'); 
    }, false); 
    document.getElementById('in').addEventListener('click', function(){ 
     alert('bubble in'); 
    }, false); 
    document.getElementById('out').addEventListener('click', function(){ 
     alert('capture out'); 
    }, true); 
    document.getElementById('in').addEventListener('click', function(){ 
     alert('capture in'); 
    }, true); 
</script> 

W tym przypadku alarmy go „uchwycić się”, „bańki w” „przechwytywanie w” i „na zewnątrz” bańka. Jeśli zauważysz, jedyną różnicą jest to, że na drugim bulbot jest przydzielany jako pierwszy, ale nie sądzę, że powinno to coś zmienić.

Próbowałem tego z Firefoksem i Chrome, a wyniki są takie same (rozumiem, że przeglądarka internetowa nie obsługuje przechwytywania).

Answer 1

Tryb quirksmode nieco uprościł model. Wydarzenia w rzeczywistości przechodzą przez up to three phases: capturing, at target, and bubbling.

Jeśli zalogujesz się event.eventPhase takiego:

document.getElementById('out').addEventListener('click', function(e){ 
    console.log(e.eventPhase + " : " + e.target.id + " : bubbling"); 
}, false); 

... zobaczysz, że „bańka” i „w” capture słuchaczy ogień w fazie AT_TARGET. Detektory zdarzeń wywoływane dla tego samego elementu podczas tej samej fazy są wywoływane w kolejności rejestrowania.