Event Bubbling Experiment
<html>
<head>
<style>
div:first-of-type {
width: 200px;
height: 200px;
border: dashed 2px #777;
}
button {
position: absolute;
bottom: 8px;
}
</style>
</head>
<body>
<div onclick="console.log('div')">
<!--Notice that even though the button is not physically overlapping the div, it still-->
<!--triggers both click handlers. This is event bubbling in action-->
<button onclick="console.log('button')">Click me</button>
</div>
<div onclick="console.log('div-2')">
</div>
</body>
</html>