事件传播与addEventListener()方法的第三个参数

个人主页:http://laichuanfeng.com/

JavaScript部分

        function ready() {
            document.getElementsByTagName("button")[0].addEventListener("click", first, false);
            document.getElementsByTagName("div")[0].addEventListener("click", second, true);
            document.getElementsByTagName("div")[0].addEventListener("click", third, false);
        };
        function first() {
            alert("first");
        }
        function second() {
            alert("second");
        }
        function third() {
            alert("third");
        }
HTML部分

<body οnlοad="ready()" >
    <div style="width:200px;height:200px;background-color:silver;">
        <button type="button">Test</button>
    </div>


当点击Test按钮时,事件执行顺序:second,first,third,为什么会这样?


这和当年NetscapeIE的浏览器之争分不开,他们两个浏览器的事件顺序不一致。

Netscape 支持事件捕捉capturing),从顶层的父节点开始触发事件,从外到内传播。

IE则支持事件冒泡(bubbling),从最内层的节点开始触发事件,逐级冒泡直到顶层节点,从内向外传播。


然后我们来看看addEventListener()的第三个参数useCapture,这个参数决定要使用的事件处理程序的调用类型,

如果参数是true,事件处理程序以捕捉模式触发;

如果参数是false,事件处理程序以冒泡模式触发。


所以例子中函数调用的次序是:

捕获模式,second(),先于目标对象触发;

目标对象本身的事件处理程序,first();

冒泡模式,third(),在目标对象之后触发。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值