burbujeante y capturando con addEventListener

Question

Recientemente he descubierto la diferencia entre burbujas y captura de eventos DOM, usando javascript. Ahora entiendo cómo se supone que funciona, pero he encontrado una situación extraña y me gustaría saber por qué está sucediendo eso.

De acuerdo con Quirks mode, la propagación del evento comienza con la captura en el div exterior, llega al fondo y luego sube hasta la parte superior. El problema fue cuando comencé a hacer algunas pruebas.

En esta primera, todo funciona como se esperaba:

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

Si hace clic en el texto, las alertas Go 'capturan a cabo', 'captura en', 'burbuja en' y 'burbuja hacia fuera'. El problema está usando el siguiente código:

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

En este caso las alertas van 'capturar a cabo', 'burbuja en', 'captura en' y 'burbuja hacia fuera'. Si lo notas, la única diferencia es que en el segundo se asigna primero el burbujeo, pero no creo que eso suponga ninguna diferencia.

He intentado esto con Firefox y Chrome, y los resultados son los mismos (entiendo que Internet Explorer no maneja la captura).

Answer 1

quirksmode simplifica el modelo un poco. De hecho, los eventos pasan por up to three phases: capturing, at target, and bubbling.

Si se desconecta la event.eventPhase así:

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

... verá que la 'burbuja' y 'captura en' oyentes fuego durante la fase de AT_TARGET. Los oyentes de eventos invocados para el mismo elemento durante la misma fase se invocan en la orden de registro.