Why bubling not working

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"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;

<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>

ansaurus

tags:

views:

answers:

Why bubling not working

related questions