addEventListener的执行顺序

最新推荐文章于 2024-04-01 14:38:04 发布

曹操今天也很可爱

最新推荐文章于 2024-04-01 14:38:04 发布

阅读量3.1k

点赞数 1

分类专栏：前端文章标签：前端 JavaScript

本文链接：https://blog.csdn.net/summer199605/article/details/100600518

版权

前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

html文件

<html>
    <head>

    </head>
    <body>
        <div id="box1" style="height: 140;width : 140px;background-color:red ">
            box1
            <div id="box2" style="height: 80;width : 80;background-color:green">box2</div>
        </div>
    </body>
    <script>
        const $ =document.querySelector.bind(document);
        const box1 = $('#box1');
        const box2 = $('#box2');
        box1.addEventListener('click',()=>{
            console.log('box1 true');
        },true);
        box1.addEventListener('click',()=>{
            console.log('box1 false');
        },false);
        box2.addEventListener('click',()=>{
            console.log('box2 true');
        },true);
        box2.addEventListener('click',()=>{
            console.log('box2 false');
        },false);
    </script>
</html>

当点击div2时，控制台输出下图所示：
在这里插入图片描述
addEventListener() 方法可以指定 “useCapture” 参数来设置传递类型：

addEventListener(event, function, useCapture);
默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。

另外补充JS事件addEventListener、on、元素属性事件触发的先后顺序：
1、在JS中存在某元素某事件，使用多个on事件和addEventListener事件进行定义。addEventListener事件会全部执行；而后面的on事件会覆盖前面的on事件，最终只执行最后一个on事件。

2、on事件和元素属性事件在本质上是一样的。因为元素属性事件是写在元素中的，所以它会首先触发，然后再触发JS中的事件（addEventListener事件、on事件）。当它们同时存在时，on事件会覆盖元素属性事件（本质相同、后面的on事件会覆盖前面的on事件）

3、当addEventListener、on、元素属性事件同时存在时，元素属性事件会首先触发，然后再执行JS中的事件。但是JS中若存在该事件的on事件，会被该on事件覆盖

JS事件addEventListener、on、元素属性事件触发的先后顺序

曹操今天也很可爱

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
addEventListener的执行顺序

html文件<html> <head> </head> <body> <div id="box1" style="height: 140;width : 140px;background-color:red "> box1 <div id="...
复制链接

扫一扫