HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>initEvent bubble</title>
</head>
<body>
  <div id="parent">
    <div id="child">Child</div>
  </div>
  <button id="legacy" type="button">Fire legacy</button>
  <button id="modern" type="button">Fire modern</button>
  <pre id="out">Waiting...</pre>
  <script>
    var parent = document.getElementById("parent");
    var child = document.getElementById("child");
    var out = document.getElementById("out");
    var label = "";

    parent.addEventListener("notify", function () {
      var line = "parent heard notify (" + label + ")";
      out.textContent = out.textContent === "Waiting..."
        ? line
        : out.textContent + "\n" + line;
    });

    document.getElementById("legacy").addEventListener("click", function () {
      label = "legacy";
      var legacy = document.createEvent("Event");
      legacy.initEvent("notify", true, false);
      child.dispatchEvent(legacy);
    });

    document.getElementById("modern").addEventListener("click", function () {
      label = "modern";
      child.dispatchEvent(new Event("notify", { bubbles: true }));
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

Event.initEvent() — bubbling (Try It)