JSFiddle - React, Tailwind, and code Playground

by hyunkikim

HTML

<div id="element1" style="width: 100%; height: 200px; border: 1px solid blue;">Element1 
<div id="element2" style="width: 100%; height: 100px; margin-top: 1em; border: 1px solid red">Element2</div>

JavaScript

const ele1 = document.querySelector("#element1");
const ele2 = document.querySelector("#element2");

// 버블링

/* ele1.addEventListener("click", () => alert("Element1"));
ele2.addEventListener("click", () => alert("Element2"));
 */

// 캡쳐링
ele1.addEventListener("click", () => alert("버블:Element1"));
ele1.addEventListener("click", () => alert("캡쳐:Element1"), {capture: true});
ele2.addEventListener("click", () => alert("버블:Element2"));