Mega Code Archive
Tracking event propagation with bubble and capture handlers
<![CDATA[
< html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(function(){
$('*').each(function(){
var current = this;
this.addEventListener('click',function(event) {
say(current.tagName + '#'+ current.id + ' target is ' + event.target.id);
},true);
this.addEventListener('click',function(event) {
say(current.tagName + '#'+ current.id + ' target is ' + event.target.id);
},false);
});
});
function say(text) {
$('#console').append('<div>'+text+'</div>');
}
});
</script>
<style>
div { margin:3px; width:50px; position:absolute;
height:50px; left:10px; top:30px;
background-color:yellow; }
div.red { background-color:red; }
</style>
</head>
<body>
<body>
<div id="a">
<div id="b">
<img id="c" src="my.jpg"/>
</div>
<div id="console"></div>
</body>
</html>
]]>