I just want to understand how capturing and bubbling work.
Unfortunately this code just work in IE, and not working in firefox.
When i click on div3, it just stop there.it not bubling up toward body element.
Can somebody enlighten me.
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<script type="text/javascript">
var addEvent = function(elem, event, func, capture){
if(typeof(window.event) != 'undefined'){
elem.attachEvent('on' + event, func);
}
else{
elem.addEventListener(event, func, capture);
}
}
var bodyFunc = function(){
alert('In element body')
}
var div1Func = function(){
alert('In element div1')
}
var div2Func = function(){
alert('In element div2')
}
var div3Func = function(){
alert('In element div3')
}
var init = function(){
addEvent(document.getElementsByTagName('body')[0], 'click', bodyFunc, true);
addEvent(document.getElementById('div1'), 'click', div1Func, true);
addEvent(document.getElementById('div2'), 'click', div2Func, true);
addEvent(document.getElementById('div3'), 'click', div3Func, true);
}
addEvent(window, 'load', init, false)
</script>
</head>
<body>
<h1>Using the Modern Event Model</h1>
<div id="div1" style="border:1px solid #000000;padding:10pt;background:cornsilk">
<p>This is div 1</p>
<div id="div2" style="border:1px solid #000000;padding:10pt;background:gray">
<p>This is div 2</p>
<div id="div3" style="border:1px solid #000000;padding:10pt; background:lightBlue">
<p>This is div 3</p>
</div>
</div>
</div>
</body>
</html>
