Bubbling e acquisizione con addEventListener

Question

Recentemente ho scoperto la differenza tra Bubbling e Capturing su eventi DOM, utilizzando javascript. Ora capisco come dovrebbe funzionare, ma ho trovato una situazione strana e mi piacerebbe sapere perché sta succedendo.

Secondo Quirks mode, la propagazione dell'evento inizia con l'acquisizione sul div esterno, raggiunge il fondo e quindi bolle verso l'alto. Il problema è stato quando ho iniziato a fare alcuni test.

Su questo primo, tutto funziona come previsto:

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

Se si sceglie il testo, gli avvisi GO 'catturano out', 'cattura', 'bolla in' e 'bolla fuori'. Il problema sta usando il seguente codice:

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

In questo caso le segnalazioni vanno 'catturare out', 'bolla in', 'cattura' e 'bolla fuori'. Se si nota, l'unica differenza è che nella seconda viene assegnato prima il bubbling, ma non penso che dovrebbe fare alcuna differenza.

Ho provato questo con Firefox e Chrome, e i risultati sono gli stessi (ho capito che Internet Explorer non gestisce la cattura).

Answer 1

la modalità numerica ha semplificato leggermente il modello. Gli eventi infatti passano attraverso lo up to three phases: capturing, at target, and bubbling.

Se si accede al event.eventPhase in questo modo:

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

... vedrai che la 'bolla in' e 'la cattura di' ascoltatori incendio durante la fase di AT_TARGET. I listener di eventi invocati per lo stesso elemento durante la stessa fase vengono richiamati nell'ordine di registrazione.