JSFiddle - React, Tailwind, and code Playground

by somya_kashyap3

HTML

<div id="biggest">
    <p><b>Event.target vs Event.currentTarget and Capturing vs. Bubbling</b></p>
    <p>We've added click handlers to every element in this DOM tree. Click on any element to see how events bubble from what you clicked on up to the top-most node. </p>
    <p>Try changing <code>false</code> to <code>true</code> in the call to addEventListener() for <code>#biggest</code> to see what happens when you handle that event while capturing rather than bubbling. (Be sure to click on the Run button in JSfiddle to load your modified code!)</p>
    <div id="smaller">&nbsp;
        <div id="doit" class="button">Do It!</div>
        <div id="doit_too" class="button">Do It Too!</div>
    </div>
</div>

CSS

/*  bubble.css */
 #biggest {
    background-color:yellow;
    width: 300px;
    height: 500px;
}
#smaller {
    background-color:orange;
    width: 200px;
    margin: 10px;
    height: 150px;
}
.button {
    margin: 25px;
    border: 1px solid gray;
    width: 75px;
}
.button:hover {
    cursor:pointer;
}

JavaScript

document.getElementById("doit").addEventListener("click", doIt, false);
document.getElementById("doit_too").addEventListener("click", doItToo, false);
document.getElementById("biggest").addEventListener("click", biggest, true);
document.getElementById("smaller").addEventListener("click", smaller, false);

function doIt(evt) {
    alert("Event handler " + evt.currentTarget.id + "! User clicked on " + evt.target.id);
}

function doItToo(evt) {
    alert("Event handler " + evt.currentTarget.id + "! User clicked on " + evt.target.id);
}

function biggest(evt) {
    alert("Event handler " + evt.currentTarget.id + "! User clicked on " + evt.target.id);
}

function smaller(evt) {
    alert("Event handler " + evt.currentTarget.id + "! User clicked on " + evt.target.id);
}