addEventListener和on的区别

为什么需要addEventListener？

先来看一个片段：

html代码

<div id="box">追梦子</div>

用on的代码

window.onload = function () {
    var box = document.getElementById("box");
    box.onclick = function () {
        console.log("我是box1");
    }
    box.onclick = function () {
        box.style.fontSize = "18px";
        console.log("我是box2");
    }
}
//    　　　　　运行结果：“我是box2”

第二个onclick把第一个onclick给覆盖了，虽然大部分情况我们用on就可以完成我们想要的结果，但是有时我们又需要执行多个相同的事件，很明显如果用on完成不了我们想要的，就可以使用addEventListener多次绑定同一个事件并且不会覆盖上一个事件。

用addEventListener的代码

window.onload = function () {
    var box = document.getElementById("box");
    box.addEventListener("click", function () {
        console.log("我是box1");
    })
    box.addEventListener("click", function () {
        console.log("我是box2");
    })
}
    // 　　　　运行结果：我是box1
    // 　　　　　　　　　我是box2

addEventListenert方法第一个参数填写事件名，注意不需要写on，第二个参数可以是一个函数，第三个参数是指在冒泡阶段还是捕获阶段处理事件处理程序,如果为true代表捕获阶段处理,如果是false代表冒泡阶段处理，第三个参数可以省略，大多数情况也不需要用到第三个参数,不写第三个参数默认false 

addEventListenert第三个参数的使用

有时候的情况是这样的

<body>
　　<div id="box">
　　　　<div id="child"></div>
　　</div>
</body>

如果我给box加click事件，如果我直接单击box没有什么问题，但是如果我单击的是child元素，那么它是怎么样执行的？（执行顺序）

box.addEventListener("click", function () {
    console.log("box");
})

child.addEventListener("click", function () {
    console.log("child");
})
    // 　　执行的结果：
    // 　　　　　　　　child
    // 　　　　　　　　box

也就是说，默认情况事件是按照事件冒泡的执行顺序进行的。 

如果第三个参数写的是true，则按照事件捕获的执行顺序进行的。

box.addEventListener("click", function () {
    console.log("box");
}, true)

child.addEventListener("click", function () {
    console.log("child");
})
    // 　　执行的结果：
    // 　　　　　　　　box
    // 　　　　　　　　child

事件冒泡执行过程：

　　从最具体的的元素（你单击的那个元素）开始向上开始冒泡，拿我们上面的案例讲它的顺序是：child->box

事件捕获执行过程：

　　从最不具体的元素（最外面的那个盒子）开始向里面冒泡，拿我们上面的案例讲它的顺序是：box->child

先捕获再冒泡

当事件捕获和事件冒泡一起存在的情况，事件又是如何触发呢。
这里记被点击的DOM节点为target节点

  1. document 往 target节点，捕获前进，遇到注册的捕获事件立即触发执行

  2. 到达target节点，触发事件（对于target节点上，是先捕获还是先冒泡则捕获事件和冒泡事件的注册顺序，先注册先执行）

  3. target节点 往 document 方向，冒泡前进，遇到注册的冒泡事件立即触发

<html>

<head>
        <title>我的第一个 HTML 页面</title>
</head>

<body>
        <div id="s1">s1
                <div id="s2">s2</div>
        </div>
        <script>
                s1.addEventListener("click", function (e) {
                        console.log("s1 冒泡事件");
                }, false);
                s2.addEventListener("click", function (e) {
                        console.log("s2 冒泡事件");
                }, false);

                s1.addEventListener("click", function (e) {
                        console.log("s1 捕获事件");
                }, true);

                s2.addEventListener("click", function (e) {
                        console.log("s2 捕获事件");
                }, true);
        </script>
</body>

</html>

在页面上点击s2，控制台输出结果：

 

事件冒泡与事件捕获应用:事件代理

详情：https://www.cnblogs.com/vickylinj/p/14197645.html

参考1：https://blog.csdn.net/farmwang/article/details/80610823

 参考：https://segmentfault.com/a/1190000005654451

posted @ 2021-10-26 09:55  vickylinj  阅读(109)  评论(0)  编辑  收藏  举报