jbgutierrez/gist:2107616

## gistfile1.html
<!DOCTYPE HTML>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Events Flow</title>
  <style type="text/css" media="screen">
    div {
      background-color: #ddd;
      padding: 40px;
      border: 1px solid white;
    }
    div:hover {
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div>
    <div>
      <div>
      </div>
    </div>
  </div>
  <div>
    <div>
      <div>
      </div>
    </div>
  </div>
  <script type="text/javascript" charset="utf-8">

    function capturing(event){
      var that = this;
      publish(function(){
          that.setAttribute('style', 'background-color: #eee');
          console.log("capturing");
      });
    }
    function bubbling(event){
      var that = this;
      publish(function(){
        that.setAttribute('style', '');
        console.log("bubbling");
      });
    }
    var elements = document.getElementsByTagName('div');

    for (var i = 0; i < elements.length; i++) {
      var e = elements[i];
      e.addEventListener('click', capturing, true);
      e.addEventListener('click', bubbling, false);
    }

    var lambdas = [];
    function publish(lambda){
      lambdas.push(lambda);
      if (lambdas.length === 1) {
        var timer = setInterval(function(){
            lambdas.shift().call();
            if (lambdas.length === 0) {
              clearInterval(timer);
            }
        }, 200);
      }
    }
  </script>
</body>
	<!DOCTYPE HTML>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>Events Flow</title>
	<style type="text/css" media="screen">
	div {
	background-color: #ddd;
	padding: 40px;
	border: 1px solid white;
	}
	div:hover {
	cursor: pointer;
	}
	</style>
	</head>
	<body>
	<div>
	<div>
	<div>
	</div>
	</div>
	</div>
	<div>
	<div>
	<div>
	</div>
	</div>
	</div>
	<script type="text/javascript" charset="utf-8">

	function capturing(event){
	var that = this;
	publish(function(){
	that.setAttribute('style', 'background-color: #eee');
	console.log("capturing");
	});
	}
	function bubbling(event){
	var that = this;
	publish(function(){
	that.setAttribute('style', '');
	console.log("bubbling");
	});
	}
	var elements = document.getElementsByTagName('div');

	for (var i = 0; i < elements.length; i++) {
	var e = elements[i];
	e.addEventListener('click', capturing, true);
	e.addEventListener('click', bubbling, false);
	}

	var lambdas = [];
	function publish(lambda){
	lambdas.push(lambda);
	if (lambdas.length === 1) {
	var timer = setInterval(function(){
	lambdas.shift().call();
	if (lambdas.length === 0) {
	clearInterval(timer);
	}
	}, 200);
	}
	}
	</script>
	</body>