javascript——事件捕获冒泡

浏览数：18 / 时间：2015年06月08日

事件冒泡：obj.addEventListener(eventType ,fn ,false);

false => 冒泡（出来）

事件捕获：obj.addEventListener(eventType ,fn ,true);

true => 捕获（进去）

HTML部分：

<div id="div1">
div1
    <div id="div2">
    div2
        <div id="div3">div3</div>
    </div>
</div>

CSS部分：

div {padding: 50px;}
#div1 {border: 1px solid red;}
#div2 {border: 1px solid blue;}
#div3 {border: 1px solid green; position: absolute; top: 300px;}

JS部分：

window.onload = function(){

        var oDiv1 = document.getElementById(‘div1‘);
        var oDiv2 = document.getElementById(‘div2‘);
        var oDiv3 = document.getElementById(‘div3‘);

        function fn1(){
            alert(this.id);
        }

        /*oDiv1.onclick = fn1;
        oDiv2.onclick = fn1;
        oDiv3.onclick = fn1;*/

        //false = 冒泡
        //告诉div，如果有一个出去的事件触发了你，你就去执行fn1这个函数
        /*oDiv1.addEventListener(‘click‘ ,fn1 ,false);
        oDiv2.addEventListener(‘click‘ ,fn1 ,false);
        oDiv3.addEventListener(‘click‘ ,fn1 ,false);    //div3->div2->div1*/
        
        //true = 捕获
        //告诉div，如果有一个进去的事件触发了你，你就去执行fn1这个函数
        /*oDiv1.addEventListener(‘click‘ ,fn1 ,true);
        oDiv2.addEventListener(‘click‘ ,fn1 ,true);
        oDiv3.addEventListener(‘click‘ ,fn1 ,true);        //div1->div2->div3*/

        //当点击div1时，弹出1；（div1冒泡）
        //当点击div2时，弹出2、1；（div2捕获->div1冒泡）
        //当点击div3时，弹出2、3、1；（div2捕获->div3冒泡->div1冒泡）
        oDiv1.addEventListener(‘click‘ ,function(){
            alert(1);
        } ,false);

        oDiv2.addEventListener(‘click‘ ,function(){
            alert(2);
        } ,true);

        oDiv3.addEventListener(‘click‘ ,function(){
            alert(3);
        } ,false);

    };