/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
<style id="jsbin-css">
#main{
  padding:4px;
  cursor: pointer;
}

#main:hover {
  background-color: palegreen;
}

#main:active {
  color: white;
  background-color: black;
}

pre#log {
  border: 1px solid gray;
  background-color: white;
  padding: 4px;
}

pre#log:hover {
  border-color: red;
  background-color: pink;
}

footer#f {
  border-radius: 4px;
  padding: 4px;
  margin-top: 1em;
  border: 2px solid black;
}
</style>
</head>
<body>
  <div id="main">hi</div>
  <pre id="log">LOG</pre>
  <div id="root">...</div>
  <footer id="f">@@@</footer>
<script id="jsbin-javascript">
var handler, handlers, mon, s, t, u, v;

handlers = [];

handler = function(id) {
  var o;
  o = {};
  o.id = id;
  o.b = [];
  o.on = true;
  o.ps1 = '>';
  o.log = function(m) {
    var s;
    s = "" + o.id + "(" + (o.size()) + ")" + o.ps1 + " " + m;
    console.log(s);
    return s;
  };
  o.size = function() {
    return o.b.length;
  };
  o.toggle = function() {
    return o.on = !o.on;
  };
  o.push = function() {
    var _;
    _ = o.b;
    o.b = [];
    return _;
  };
  o.send = function(e) {
    if (o.on) {
      o.b.push(e);
    }
    o.log("<" + e.type + ">");
    return o;
  };
  handlers.push(o);
  return o;
};

s = handler('root');

t = handler('main');

u = handler('log');

v = handler('f');

$("#root").dblclick(s.send);

$("#main").dblclick(t.send);

$("#log").dblclick(u.send);

$("#f").dblclick(v.send);

mon = function() {
  return handlers.map(function(h) {
    return h.log(".");
  });
};

</script>


<script id="jsbin-source-css" type="text/css">#main{
  padding:4px;
  cursor: pointer;
}

#main:hover {
  background-color: palegreen;
}

#main:active {
  color: white;
  background-color: black;
}

pre#log {
  border: 1px solid gray;
  background-color: white;
  padding: 4px;
}

pre#log:hover {
  border-color: red;
  background-color: pink;
}

footer#f {
  border-radius: 4px;
  padding: 4px;
  margin-top: 1em;
  border: 2px solid black;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">handlers = []

handler = (id) ->
  o = {}
  o.id = id
  o.b = []
  o.on = true
  o.ps1 = '>'
  o.log = (m) ->
    s = "#{o.id}(#{o.size()})#{o.ps1} #{m}"
    console.log s
    s
  o.size = () -> o.b.length
  o.toggle = () -> o.on = !o.on
  o.push = () -> _ = o.b; o.b = []; _
  o.send = (e) ->
    if o.on
      o.b.push e
    o.log "<#{e.type}>"
    o
  handlers.push o
  o

s = handler('root')
t = handler('main')
u = handler('log')
v = handler('f')

$("#root").dblclick(s.send)
$("#main").dblclick(t.send)
$("#log").dblclick(u.send)
$("#f").dblclick(v.send)

mon = () ->
  handlers.map (h) -> h.log(".")


#setInterval(5000, () -> console.log (handlers.map (h) -> [h.id, h.length]))</script></body>
</html>

## jsbin.yavotukula.css
#main{
  padding:4px;
  cursor: pointer;
}

#main:hover {
  background-color: palegreen;
}

#main:active {
  color: white;
  background-color: black;
}

pre#log {
  border: 1px solid gray;
  background-color: white;
  padding: 4px;
}

pre#log:hover {
  border-color: red;
  background-color: pink;
}

footer#f {
  border-radius: 4px;
  padding: 4px;
  margin-top: 1em;
  border: 2px solid black;
}

## jsbin.yavotukula.js
var handler, handlers, mon, s, t, u, v;

handlers = [];

handler = function(id) {
  var o;
  o = {};
  o.id = id;
  o.b = [];
  o.on = true;
  o.ps1 = '>';
  o.log = function(m) {
    var s;
    s = "" + o.id + "(" + (o.size()) + ")" + o.ps1 + " " + m;
    console.log(s);
    return s;
  };
  o.size = function() {
    return o.b.length;
  };
  o.toggle = function() {
    return o.on = !o.on;
  };
  o.push = function() {
    var _;
    _ = o.b;
    o.b = [];
    return _;
  };
  o.send = function(e) {
    if (o.on) {
      o.b.push(e);
    }
    o.log("<" + e.type + ">");
    return o;
  };
  handlers.push(o);
  return o;
};

s = handler('root');

t = handler('main');

u = handler('log');

v = handler('f');

$("#root").dblclick(s.send);

$("#main").dblclick(t.send);

$("#log").dblclick(u.send);

$("#f").dblclick(v.send);

mon = function() {
  return handlers.map(function(h) {
    return h.log(".");
  });
};
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	<style id="jsbin-css">
	#main{
	padding:4px;
	cursor: pointer;
	}

	#main:hover {
	background-color: palegreen;
	}

	#main:active {
	color: white;
	background-color: black;
	}

	pre#log {
	border: 1px solid gray;
	background-color: white;
	padding: 4px;
	}

	pre#log:hover {
	border-color: red;
	background-color: pink;
	}

	footer#f {
	border-radius: 4px;
	padding: 4px;
	margin-top: 1em;
	border: 2px solid black;
	}
	</style>
	</head>
	<body>
	<div id="main">hi</div>
	<pre id="log">LOG</pre>
	<div id="root">...</div>
	<footer id="f">@@@</footer>
	<script id="jsbin-javascript">
	var handler, handlers, mon, s, t, u, v;

	handlers = [];

	handler = function(id) {
	var o;
	o = {};
	o.id = id;
	o.b = [];
	o.on = true;
	o.ps1 = '>';
	o.log = function(m) {
	var s;
	s = "" + o.id + "(" + (o.size()) + ")" + o.ps1 + " " + m;
	console.log(s);
	return s;
	};
	o.size = function() {
	return o.b.length;
	};
	o.toggle = function() {
	return o.on = !o.on;
	};
	o.push = function() {
	var _;
	_ = o.b;
	o.b = [];
	return _;
	};
	o.send = function(e) {
	if (o.on) {
	o.b.push(e);
	}
	o.log("<" + e.type + ">");
	return o;
	};
	handlers.push(o);
	return o;
	};

	s = handler('root');

	t = handler('main');

	u = handler('log');

	v = handler('f');

	$("#root").dblclick(s.send);

	$("#main").dblclick(t.send);

	$("#log").dblclick(u.send);

	$("#f").dblclick(v.send);

	mon = function() {
	return handlers.map(function(h) {
	return h.log(".");
	});
	};

	</script>


	<script id="jsbin-source-css" type="text/css">#main{
	padding:4px;
	cursor: pointer;
	}

	#main:hover {
	background-color: palegreen;
	}

	#main:active {
	color: white;
	background-color: black;
	}

	pre#log {
	border: 1px solid gray;
	background-color: white;
	padding: 4px;
	}

	pre#log:hover {
	border-color: red;
	background-color: pink;
	}

	footer#f {
	border-radius: 4px;
	padding: 4px;
	margin-top: 1em;
	border: 2px solid black;
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">handlers = []

	handler = (id) ->
	o = {}
	o.id = id
	o.b = []
	o.on = true
	o.ps1 = '>'
	o.log = (m) ->
	s = "#{o.id}(#{o.size()})#{o.ps1} #{m}"
	console.log s
	s
	o.size = () -> o.b.length
	o.toggle = () -> o.on = !o.on
	o.push = () -> _ = o.b; o.b = []; _
	o.send = (e) ->
	if o.on
	o.b.push e
	o.log "<#{e.type}>"
	o
	handlers.push o
	o

	s = handler('root')
	t = handler('main')
	u = handler('log')
	v = handler('f')

	$("#root").dblclick(s.send)
	$("#main").dblclick(t.send)
	$("#log").dblclick(u.send)
	$("#f").dblclick(v.send)

	mon = () ->
	handlers.map (h) -> h.log(".")


	#setInterval(5000, () -> console.log (handlers.map (h) -> [h.id, h.length]))</script></body>
	</html>