<div id="grandParent">
	#Grandparent
	<div id="parent">
		#Parent
		<div id="child">
			#Child
		</div>
	</div>
</div>

div {
	margin: auto;
	width: auto;
	color: #fff;
	font-size: 24px;
	font-family: "Roboto", sans-serif;
	text-align: center;
}

#grandParent {
	background: blue;
	width: 400px;
	height: 450px;
	padding: 50px;
}

#parent {
	background: red;
	width: 300px;
	height: 300px;
	padding: 50px;
}

#child {
	background: green;
	width: 200px;
	height: 150px;
	padding: 50px;
}

const grandParent = document.getElementById("grandParent"),
	parent = document.getElementById("parent"),
	child = document.getElementById("child");

grandParent.addEventListener("click", () => {
	console.log("grandparent clicked");
});
parent.addEventListener("click", () => {
	console.log("parent clicked");
});
child.addEventListener("click", () => {
	console.log("child clicked");
});

grandParent.addEventListener(
	"click",
	() => {
		console.log("grandparent clicked from the capture");
	},
	{ capture: true }
);
parent.addEventListener(
	"click",
	() => {
		console.log("parent clicked from the capture");
	},
	{ capture: true }
);
child.addEventListener(
	"click",
	() => {
		console.log("child clicked from the capture");
	},
	{ capture: true }
);