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

最新推荐文章于 2024-02-08 07:45:00 发布

Codelegant

最新推荐文章于 2024-02-08 07:45:00 发布

阅读量2.1k

点赞数

分类专栏：学习体会 JavaScript 文章标签： addEventListener 事件传播捕获事件处理程序

本文链接：https://blog.csdn.net/elegant_lai/article/details/13532811

版权

JavaScript 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

学习体会

4 篇文章 0 订阅

订阅专栏

个人主页：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，为什么会这样？

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

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

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

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

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

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

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

捕获模式，second()，先于目标对象触发；

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

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

Codelegant

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件传播与addEventListener()方法的第三个参数

function ready() { document.getElementsByTagName("button")[0].addEventListener("click", first, true); document.getElementsByTagName("button")[0].addEventListener("click", secon
复制链接

扫一扫