Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<body>
  <div id="1">
    <div id="2">
      <div id="3"></div>
    </div>
  </div>
  <script>
    var allTargets = {}
    allTargets.t1 = document.getElementById("1");
    allTargets.t2 = document.getElementById("2");
    allTargets.t3 = document.getElementById("3");
    allTargets.t4 = allTargets.t1.createShadowRoot();
    allTargets.t5 = allTargets.t4.appendChild(document.createElement("div"));
    allTargets.t6 = allTargets.t5.appendChild(document.createElement("div"));
    allTargets.t7 = allTargets.t6.appendChild(document.createElement("content"));
    allTargets.t8 = allTargets.t6.createShadowRoot();
    allTargets.t9 = allTargets.t8.appendChild(document.createElement("div"));
    allTargets.t10 = allTargets.t9.appendChild(document.createElement("content"));
    var path = [];
    function loggerCreator(id) {
      return function() { path.push(id); }
    }
    for (var i = 1; i <= 10; ++i) {
      allTargets["t"+i].addEventListener("click", loggerCreator(i));
    }
    allTargets.t3.dispatchEvent(new Event("click", { bubbles: true }));                     
    document.writeln(path);
  </script>
</body>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
dglazkovpro
0viewers