Los oyentes de eventos registrados para la fase de captura no se activaron antes del burbujeo, ¿por qué?
Intento comprender qué determina el orden en el que se activan los controladores de eventos al hacer clic en un anidado<div> - Lo que estoy viendo parece estar en desacuerdo con el comportamiento documentado, así que estoy buscando un poco de ayuda para entenderlo.
Tengo 2 divs anidados, y tengo 2 controladores de eventos adjuntos a cada uno, uno para la fase de captura y otro para la fase de propagación:
<html>
<head>
<script>
function setup(){
var outer = document.getElementById('outer');
outer.addEventListener('click', function(){console.log('outer false');}, false);
outer.addEventListener('click', function(){console.log('outer true');}, true);
var inner = document.getElementById('inner');
inner.addEventListener('click', function(){console.log('inner false');}, false);
inner.addEventListener('click', function(){console.log('inner true');}, true);
}
</script>
<style>
div {
border: 1px solid;
padding: 1em;
}
</style>
</head>
<body onload="setup()">
<div id="outer">
<div id="inner">
CLICK
</div>
</div>
</body>
</html>
De acuerdo alo que he leído la salida debe ser:
outer true
inner true
inner false
outer false
pero lo que realmente veo (en Chrome y Firefox) es:
outer true
inner false
inner true
outer false
¿Alguien puede explicar la discrepancia?