DOM propagation

  <h2>Box with propagation</h2>
  <div id="boxWithPropagation" class="box">
    <div>
      <div>
      </div>
    </div>
  </div>
  <h2>Box with propagation reverse</h2>
  <div id="boxWithPropagationReverse" class="box">
    <div>
      <div>
      </div>
    </div>
  </div>
  <h2>Box without propagation</h2>
  <div id="boxWithoutPropagation" class="box">
    <div>
      <div>
      </div>
    </div>
  </div>
  <script>
    // Box with propagation
    document.querySelector("#boxWithPropagation").addEventListener("click", () => {
      alert("parent box");
    }, false);
    document.querySelector("#boxWithPropagation > div").addEventListener("click", () => {
      alert("child box");
    }, false);
    document.querySelector("#boxWithPropagation > div > div").addEventListener("click", () => {
      alert("child of child box");
    }, false);

    // Box with propagation reverse
    document.querySelector("#boxWithPropagationReverse").addEventListener("click", () => {
      alert("parent box");
    }, true);
    document.querySelector("#boxWithPropagationReverse > div").addEventListener("click", () => {
      alert("child box");
    }, true);
    document.querySelector("#boxWithPropagationReverse > div > div").addEventListener("click", () => {
      alert("child of child box");
    }, true);

    // Box without propagation
    document.querySelector("#boxWithoutPropagation").addEventListener("click", e => {
      alert("parent box");
      e.stopPropagation();
    });
    document.querySelector("#boxWithoutPropagation > div").addEventListener("click", e => {
      alert("child box");
      e.stopPropagation();
    });
    document.querySelector("#boxWithoutPropagation > div > div").addEventListener("click", e => {
      alert("child of child box");
      e.stopPropagation();
    });
  </script>