HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>eventPhase nested</title>
  <style>
    .box { margin: 12px; padding: 10px; border: thin solid #333; cursor: pointer; }
    #d1 { background: #cceeff; }
    #d2 { background: #f6eedb; }
    #d3 { background: #cceeff; }
    #d4 { background: #f6eedb; }
    #divInfo { margin-top: 12px; padding: 8px; background: #fff; border: 1px solid #ccc; font-size: 14px; min-height: 4em; white-space: pre-wrap; }
  </style>
</head>
<body>
  <input type="checkbox" id="chCapture">
  <label for="chCapture">Use Capturing</label>
  <div id="d1" class="box">d1
    <div id="d2" class="box">d2
      <div id="d3" class="box">d3
        <div id="d4" class="box">d4</div>
      </div>
    </div>
  </div>
  <div id="divInfo"></div>
  <script>
    var divInfo = document.getElementById("divInfo");
    var chCapture = document.getElementById("chCapture");
    var ids = ["d1", "d2", "d3", "d4"];
    var names = ["none", "capturing", "target", "bubbling"];

    function onDivClick(e) {
      if (e.eventPhase === Event.AT_TARGET) {
        e.currentTarget.style.backgroundColor = "#fecaca";
      }
      divInfo.textContent +=
        e.currentTarget.id + "; eventPhase: " +
        (names[e.eventPhase] || "error") + "\n";
    }

    function clearStyles() {
      ids.forEach(function (id, i) {
        document.getElementById(id).style.backgroundColor =
          i % 2 !== 0 ? "#f6eedb" : "#cceeff";
      });
      divInfo.textContent = "";
    }

    function removeListeners() {
      ids.forEach(function (id) {
        var el = document.getElementById(id);
        el.removeEventListener("click", onDivClick, true);
        el.removeEventListener("click", onDivClick, false);
      });
    }

    function addListeners() {
      var capture = chCapture.checked;
      ids.forEach(function (id) {
        document.getElementById(id).addEventListener("click", onDivClick, capture);
      });
    }

    chCapture.addEventListener("change", function () {
      removeListeners();
      addListeners();
      clearStyles();
    });

    clearStyles();
    addListeners();
  </script>
</body>
</html>
Lines: 0 | Characters: 0
Live Preview Auto-refresh on Run
Event.eventPhase — nested divs MDN-style (Try It)
