JSFiddle - React, Tailwind, and code Playground

HTML

<p>
    useCapture (true) on parent, influenced behaviour
</p>
<div id="a">a (a)
<div id="b">b (a, b)<div id="c">c (a, c, b)</div></div>
</div>
<p>
    useCapture (false) on parent, normal behaviour
</p>
<div id="d">d (d)
<div id="e">e (e, d)<div id="f">f (f, e, d)</div></div>
</div>

CSS

#a, #d { padding: 5px; background: green;}
#b, #e { padding: 5px; background: red;}
#c, #f { padding: 5px; background: green;}

JavaScript

var els = {
    a: [document.getElementById ('a'), true],
    b: [document.getElementById ('b'), true],
    c: [document.getElementById ('c'), true],
    d: [document.getElementById ('d'), false],
    e: [document.getElementById ('e'), false],
    f: [document.getElementById ('f'), false]
};

for (key in els)
{
    var el = els[key][0];
    var useCapture = els[key][1];
    
    el.addEventListener ('click',
        (function (key)
        {
            return function () { alert (key + ' - trigger'); };
        })(key), useCapture
    );
}