DOM事件流

I'm Mr.C

于 2023-05-01 21:20:42 发布

阅读量893

点赞数 1

分类专栏：笔记 JavaScript 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_44849271/article/details/130457706

版权

JavaScript 同时被 2 个专栏收录

37 篇文章 1 订阅

订阅专栏

笔记

15 篇文章 0 订阅

订阅专栏

DOM事件流

DOM事件流分为三个阶段：捕获阶段——目标阶段——冒泡阶段。

1、捕获阶段
2、目标阶段
3、冒泡阶段

以点击事件为例：
假设现在有一个html文件，html标签下有一个body标签，body标签下有一个div标签，div标签下有一个p标签。

红色：捕获阶段
深蓝色：冒泡阶段
当用户点击p标签时，会先执行捕获阶段：
在这里插入图片描述
说白了就是，用户点击元素的时候，会先找到第一层元素（html），再找到第二层元素（body），再继续找到下一层元素（div），最后找到目标元素（p）。

找到目标元素就是获取目标阶段。

获取目标之后就是冒泡阶段，代码中元素绑定的事件（onclick）一般是冒泡阶段执行的。
在这里插入图片描述
冒泡阶段也是从目标元素依次往外层元素执行，所以最外层元素绑定的事件也会被执行。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: #e9e9e9;
        }
        .one{
            width: 30vw;
            height: 30vw;
            background-color: aqua;
        }
        .two{
            width: 15vw;
            height: 15vw;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="one">
        one
        <div class="two">
            two
        </div>
    </div>
    <script>
        class getDom{
            constructor(select,callBack){
                const node=document.querySelector(select);
                node.addEventListener('click',callBack)
                return node;
            }
        }
        let body=new getDom('body',()=>{console.log("click_body")});
        let one=new getDom('.one',()=>{console.log("click_one")});
        let two=new getDom('.two',()=>{console.log("click_two")});
    </script>
</body>
</html>

此时点击红色方块，浏览器控制台输出
在这里插入图片描述
因为红色方块元素是html——body——div(.one)中的元素，所以点击红色方块元素冒泡会让所有的父元素绑定的函数都执行。

冒泡阶段在实际开发过程中会影响业务逻辑，所以为了防止这种情况，有stopPropagation这个函数阻止冒泡。

阻止冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: #e9e9e9;
        }
        .one{
            width: 30vw;
            height: 30vw;
            background-color: aqua;
        }
        .two{
            width: 15vw;
            height: 15vw;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="one">
        one
        <div class="two">
            two
        </div>
    </div>
    <script>
        class getDom{
            constructor(select,callBack){
                const node=document.querySelector(select);
                node.addEventListener('click',callBack)
                return node;
            }
        }
        let body=new getDom('body',(event)=>{console.log("click_body");event.stopPropagation()});
        let one=new getDom('.one',(event)=>{console.log("click_one");event.stopPropagation()});
        let two=new getDom('.two',(event)=>{console.log("click_two");event.stopPropagation()});
    </script>
</body>
</html>

在这里插入图片描述

addEventListener的第三个参数用于控制绑定的函数是捕获阶段执行还是冒泡阶段执行。false为冒泡阶段执行；true为捕获阶段执行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: #e9e9e9;
        }
        .one{
            width: 30vw;
            height: 30vw;
            background-color: aqua;
        }
        .two{
            width: 15vw;
            height: 15vw;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="one">
        one
        <div class="two">
            two
        </div>
    </div>
    <script>
        class getDom{
            constructor(select,callBack){
                const node=document.querySelector(select);
                node.addEventListener('click',callBack,true);//此处第三个参数修改为true
                return node;
            }
        }
        let body=new getDom('body',()=>{console.log("click_body")});
        let one=new getDom('.one',()=>{console.log("click_one")});
        let two=new getDom('.two',()=>{console.log("click_two")});
    </script>
</body>
</html>

浏览器控制台输出结果：
在这里插入图片描述
可以看到捕获阶段执行的函数与冒泡阶段执行的函数运行顺序是相反的。

I'm Mr.C

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
DOM事件流

用户点击元素的时候，会先找到第一层元素（html），再找到第二层元素（body），再继续找到下一层元素（div），最后找到目标元素（p）。因为红色方块元素是html——body——div(.one)中的元素，所以点击红色方块元素冒泡会让所有的父元素绑定的函数都执行。获取目标之后就是冒泡阶段，代码中元素绑定的事件（onclick）一般是冒泡阶段执行的。冒泡阶段也是从目标元素依次往外层元素执行，所以最外层元素绑定的事件也会被执行。DOM事件流分为三个阶段：捕获阶段——目标阶段——冒泡阶段。
复制链接

扫一扫