JSFiddle - React, Tailwind, and code Playground

HTML

<div id="capture1">1
    <div id="capture2">2
        <div id="capture3">3</div>
    </div>
</div>

<div id="bubble1">1
    <div id="bubble2">2
        <div id="bubble3">3</div>
    </div>
</div>

<div id="both1">1
    <div id="both2">2
        <div id="both3">3</div>
    </div>
</div>

CSS

div{border:solid blue 1px; margin:5px}

JavaScript

document.getElementById("capture1").addEventListener("click", function() {
    alert(1);
}, true);
document.getElementById("capture2").addEventListener("click", function() {
    alert(2);
}, true);
document.getElementById("capture3").addEventListener("click", function() {
    alert(3);
}, true);

document.getElementById("bubble1").addEventListener("click", function() {
    alert(1);
}, false);
document.getElementById("bubble2").addEventListener("click", function() {
    alert(2);
}, false);
document.getElementById("bubble3").addEventListener("click", function() {
    alert(3);
}, false);


document.getElementById("both1").addEventListener("click", function() {
    alert('true 1');
}, true);
document.getElementById("both2").addEventListener("click", function() {
    alert('true 2');
}, true);
document.getElementById("both3").addEventListener("click", function() {
    alert('true 3');
}, true);
document.getElementById("both1").addEventListener("click", function() {
    alert('false 1');
}, false);
document.getElementById("both2").addEventListener("click", function() {
    alert('false 2');
}, false);
document.getElementById("both3").addEventListener("click", function() {
    alert('false 3');
}, false);