关于事件捕获和事件冒泡

最新推荐文章于 2023-12-17 00:12:04 发布

西红柿挂面

最新推荐文章于 2023-12-17 00:12:04 发布

阅读量307

点赞数 1

分类专栏： DOM

本文链接：https://blog.csdn.net/Bcxbclj/article/details/105602875

版权

DOM 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

首先，先说一下，当我们点击一个元素的时候，浏览器是怎么执行的。
该内容来自张生荣的—js点击事件的执行过程实例分析
w3c标准模型，有3个过程：
事件捕获阶段：事件从window一直向下传播到目标元素, 依次检查经过的节点是否绑定了事件监听函数，如果有则执行。(遇到相同事件默认不执行，记录下来，等冒泡阶段执行)
事件处理阶段：事件到达目标元素, 触发目标元素的监听函数。（点击的那个元素就是目标元素）
事件冒泡阶段：事件从目标元素冒泡到window, 依次检查经过的节点是否绑定了事件监听函数，如果有则执行。（在捕获阶段调用后，不会在冒泡阶段再次调用）
在这里插入图片描述
代码：

<body>
    <div class="box" onclick="firstClick()" style="width:300px;height:300px;background:green;">
        parent
        <div class="child" onclick="secondClick()" style="width:150px;height:150px;background:rgb(61, 127, 214);">child
            <div class="button" onclick="thirdClick()" style="width:50px;height:50px;background:rgb(226, 126, 171);">提交</div>
        </div>
    </div>
    <script>
        var divs = document.querySelectorAll("div"); //获取所有的divs
        //这种绑定方法是0级模型里面的，该模型的事件不会传播，即没有事件流的概念。
        function firstClick() {
            console.log('parent_firstClick');
        }

        function secondClick() {
            console.log('child_secondClick');
        }

        function thirdClick() {
            console.log('btn_thirdClick');
        }
//2级模型，有三个过程：事件捕获阶段，事件处理阶段，事件冒泡阶段
        function fn0() {
            console.log('parent');
        }

        function fn1() {
            console.log('child');
        }

        function fn2() {
            console.log('btn');
        }
        divs[0].addEventListener("click", fn0, false);
        divs[1].addEventListener("click", fn1, false);
        divs[2].addEventListener("click", fn2, false);
        //执行顺序，o级模型和2级模型的事件，按照先后顺序执行
        //如果是0级模型和IE模型的事件，先执行0级模型事件在执行IE事件
    </script>
   
</body>

addEventListener(“click”, fn0, false);有三个参数，第三个参数，true是捕获执行，false是在冒泡阶段执行
在这里插入图片描述
将第三个参数，修改一个为true

将第三个参数都改成true
在这里插入图片描述
内容基本是自己理解和百度出来的一些东西，望指正。

西红柿挂面

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于事件捕获和事件冒泡

首先，先说一下，当我们点击一个元素的时候，浏览器是怎么执行的。w3c标准模型，有3个过程：事件捕获阶段：事件从window一直向下传播到目标元素, 依次检查经过的节点是否绑定了事件监听函数，如果有则执行。(遇到相同事件默认不执行，记录下来，等冒泡阶段执行)事件处理阶段：事件到达目标元素, 触发目标元素的监听函数。（点击的那个元素就是目标元素）事件冒泡阶段：事件从目标元素冒泡到window...
复制链接

扫一扫