I'm trying to understand what determines the order in which event handlers are triggered when clicking a nested <div> - what I am seeing seems to be at odds with documented behaviour so I'm looking for a little help to understand it.
I have 2 nested divs, and I have 2 event handlers attached to each, one for the capturing phase, and one for the bubbling phase:
<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>
According to what I have read the output should be:
outer true
inner true
inner false
outer false
but what I actually see (on Chrome and Firefox) is:
outer true
inner false
inner true
outer false
Can anyone explain the discrepancy?