Ouvintes de eventos registrados para a fase de captura não são acionados antes de borbulhar - por quê?
Estou tentando entender o que determina a ordem na qual os manipuladores de eventos são acionados ao clicar em um aninhado<div> - o que estou vendo parece estar em desacordo com o comportamento documentado, então estou procurando uma pequena ajuda para entendê-lo.
Tenho 2 divs aninhados e tenho 2 manipuladores de eventos anexados a cada um deles, um para a fase de captura e outro para a fase de bubbling:
<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 acordo como que eu li a saída deve ser:
outer true
inner true
inner false
outer false
mas o que eu realmente vejo (no Chrome e no Firefox) é:
outer true
inner false
inner true
outer false
Alguém pode explicar a discrepância?