Прослушиватели событий, зарегистрированные на этапе захвата, не сработали до появления пузырей - почему?
Я пытаюсь понять, что определяет порядок запуска обработчиков событий при нажатии на вложенную<div> - то, что я вижу, похоже, противоречит документированному поведению, поэтому я ищу небольшую помощь, чтобы понять это.
У меня есть 2 вложенных элемента div, и у меня есть 2 обработчика событий, один для фазы захвата и один для фазы пузырьков:
<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>
В соответствии счто я прочитал вывод должен быть:
outer true
inner true
inner false
outer false
но на самом деле я вижу (в Chrome и Firefox):
outer true
inner false
inner true
outer false
Кто-нибудь может объяснить несоответствие?