JSFiddle - React, Tailwind, and code Playground

HTML

<div id="div_outer" style="height: 340px; width: 200px; background-color: pink; padding: 10px;">
Div 1
    <div id="div_inner1" style="height: 140px; width: 140px; background-color: yellow; padding: 10px;">
        Div 2
        <div id="div_inner2" style="height: 140px; width: 140px; background-color: green; padding: 10px;">
            Div 3
        </div>
    </div>
</div>

JavaScript

window.document.querySelector("#div_outer").addEventListener("click", function() {
    alert("Div 1");
}, false);

window.document.querySelector("#div_inner1").addEventListener("click", function() {
    alert(" Inner Div 2");
}, true);

window.document.querySelector("#div_inner2").addEventListener("click", function() {
    alert("Inner Div 3");
}, true);