JSFiddle - React, Tailwind, and code Playground

by Kevin Jic

HTML

<div id="A">
  <p>click me alert A</p>
  <div id="aa">
    <p>capturing(true)</p>
    <p>click me alert A-aa</p>
  </div>
</div>

<div id="B">
  <p>click me alert B</p>
  <div id="bb">
    <p>bubbling(false)</p>
    <p>click me alert bb-B</p>
  </div>
</div>

CSS

#A,
#B {
  width: 200px;
  height: 200px;
  background-color: yellow;
  display: inline-block;
  margin: 5px 10px;
}

#aa,
#bb {
  width: 160px;
  height: 100px;
  background-color: white;
  display: inline-block;
  margin: 10px 16px;
}

JavaScript

// script before </body>
+ function() {
  document.getElementById("A").addEventListener("click", function() {
    alert("A"); // capturing(true) parent div
  }, true);
  document.getElementById("B").addEventListener("click", function() {
    alert("B"); // bubbling(false) parent div
  }, false);
  document.getElementById("aa").addEventListener("click", function() {
    alert("aa");
  });
  document.getElementById("bb").addEventListener("click", function() {
    alert("bb");
  });
}();