javascript事件冒泡和事件捕获

2025-11-05 05:54:00

1、(1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。

  IE 5.5: div -> body -> document

  IE 6.0: div -> body -> html -> document

  Mozilla 1.0: div -> body -> html -> document -> window

(2)捕获型事件(event capturing):事件从最不精确的对象(document 对象)开始触发,然后到最精确的对象

(3)DOM事件流:同时支持两种事件模型:捕获型事件和冒泡型事件,但是,捕获型事件先发生。两种事件流会触及DOM中的所有对象,从document对象开始,也在document对象结束。

2、支持W3C标准的浏览器在添加事件时用addEventListener(event,fn,useCapture)方法

addEventListener(event,fn,useCapture)//支持w3c即用的DOM事件流  ,先事件捕获,再事件冒泡。    

 useCapture参数是一个boolean值     true代表在事件处理函数捕获时执行,false代表在冒泡时执行  

<div id="div1">div

        <ul id="ul1">ul

            <li id="li1">li

                <a href="" id="a1">a</a>

            </li>

        </ul>

    </div>

以下为支持w3c的浏览器  比如chrome firfox等

oUl.addEventListener('click',function (){

        alert('ul');

    },true);

    oLi.addEventListener('click',function (){

        alert('li');

    },true);

    oA.addEventListener('click',function (){

        alert('a');

    },true);//以上事件的执行顺序是ul>li>a  采用捕获

/*oDiv.onclick=function (){

        alert('div');

    }

   oLi.onclick=function (){

        alert('li');

    }

    oA.onclick=function (){

        alert('a');

    }*//这种方式默认为采用冒泡 a>li>div

oUl.addEventListener('click',function (){

        alert('ul');

    },false);

    oLi.addEventListener('click',function (){

        alert('li');

    },false);

    oA.addEventListener('click',function (){

        alert('a');

    },false);//这种方式都是采用冒泡  a>li>div

关于IE7,8不支持w3c的  采用ele.attachEvent("onclick", doSomething2);统一采用冒泡类型

jQuery中为了兼容统一采用冒泡

3、总之一点:  基本上不去专门addEventListener的第三个参数设置为false,都是只考虑冒泡的。

关于阻止冒泡

 在W3c中,使用eve.stopPropagation()方法//eve事件对象

在IE下设置eve.cancelBubble = true;

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢