Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
​
<html>
  <head>
    <title></title>
    <script>
    var targets = [];
​
    function l(e) {
      targets.push(e.currentTarget);
    }
    function serialize(list) {
      var s = "";
      for (var i = 0; i < list.length; ++i) {
        var item = list[i];
        if (item.nodeName) {
          s += item.nodeName;
        } else {
          s += item;
        }
        if (item.id) {
          s += "[id=" + item.id + "]";
        }
        if (i < (list.length - 1)) {
          s += ", ";
        }
      }
      return s;
    }
    function log(e) {
      document.getElementsByTagName("pre")[0].textContent +=
      "####################################################\n" +
          "Event [" + e.type + "] dispatched to " + e.target.id + "\n" +
          "propagation path is " + serialize(targets) + "\n";
       targets = [];
    }
​
    function init() {
      var sh1 = document.getElementById("sh1");
      var s1 = document.getElementById("s1");
      var s2 = document.getElementById("s2");
​
      sh1.onclick = l;
      document.body.onclick = l;
      document.documentElement.onclick = l;
      document.onclick = l;
      var sr1 = sh1.createShadowRoot();
      sr1.innerHTML = "<span id='sh2' onclick='l(event)'><content id='ip1' onclick='l(event)'></content></span>";
      var sr2 = sr1.firstChild.createShadowRoot();
      sr2.innerHTML = "<span id='wrapip2.1' onclick='l(event)'><content id='ip2.1' select='#s1' onclick='l(event)'></content></span>" +
        "<span id='wrapid2.2' onclick='l(event)'><content id='ip2.2' select='#s2' onclick='l(event)'></content></span>";
​
      window.onclick = l;
      window.addEventListener("click", function(e) {
        log(e)
      });
    }
    </script>
    <style>
    </style>
  </head>
  <body onload="init()">
    <div id="sh1"><span id="s1" onclick="l(event)"> [click me 1] </span><span id="s2" onclick="l(event)"> [click me 2] </span></div>
    <pre></pre>
  </body>
</html>
​
 
​
Output

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

Dismiss x
public
Bin info
dglazkovpro
0viewers