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 = [];

outer.addEventListener('click', function () { log.push('1: capturing outer'); }, true /*capturing*/);
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*/);