capture-bubble

by leozcx

HTML

<div id="div1">
  1
  <div id="div2">
    2
  </div>
</div>

CSS

#div1 {
  border: 1px solid red;
}

#div2 {
  border: 1px solid #ccc;
}

div {
  margin: 5px;
}

JavaScript

var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
div1.addEventListener("click", onDiv1Clicked);
div2.addEventListener("click", onDiv2Clicked);

function onDiv1Clicked(event) {
  console.log("div1 clicked");
}

function onDiv2Clicked(event) {
  console.log("div2 clicked");
}