JSFiddle - React, Tailwind, and code Playground

by Chris Rebert

HTML

<div id="outer">
    Outer
    <div id="inner">Inner</div>
</div>

CSS

#outer {
    background-color: fuchsia;
    padding: 10px;
}
#inner {
    background-color: orange;
}

JavaScript

var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
var log = [];

if (outer.addEventListener == undefined) {
    alert("DOESN'T SUPPORT addEventListener !");
}

try {
    outer.addEventListener('click', function () { log.push('1: capturing outer'); }, true /*capturing*/);
}
catch (err) {
    /* Prior to Firefox 6, the browser would throw an error if the useCapture parameter was not explicitly false. */
    alert("Error adding capturing handler: " + err);
}
inner.addEventListener('click', function () { log.push('2: capturing inner'); }, true /*capturing*/);

inner.addEventListener('click', function () { log.push('3: bubbling inner'); }, false /*bubbling*/);
outer.addEventListener('click', function () { log.push('4: bubbling outer');
                                              window.alert(log.join('\n'));
}, false /*bubbling*/);