JavaScript之DOM事件流

最新推荐文章于 2023-09-18 03:34:47 发布

bear*6

最新推荐文章于 2023-09-18 03:34:47 发布

阅读量934

点赞数 6

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

本文链接：https://blog.csdn.net/m0_48375854/article/details/121654290

版权

JavaScript 专栏收录该内容

50 篇文章 16 订阅

订阅专栏

事件流

一、什么是DOM事件流
二、DOM事件流的验证

一、什么是DOM事件流

事件流描述的是从页面中接收事件的顺序。

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即 DOM 事件流。

DOM事件流分为三个阶段：

捕获阶段
当前目标阶段
冒泡阶段

比如我们现在在页面中给div注册了一个点击事件，代码如下所示：

<!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>
</head>
<body>
    <div>点击</div>
    <script>
        var div = document.querySelector('div');
        div.onclick = function(){
            alert('被点击了');
        }
    </script>
</body>
</html>

        可以发现这个div是存放在body里面的，而body又是存在于html标签内部的，html标签又是在整个页面的document文档中。
        虽然我们是给div添加了点击事件，但是它的执行流程是：document先接收该点击事件，如果在该层没有添加点击事件，则去往下一层继续查找，直到找到目标，这一阶段称为捕获阶段。
        当我们得到的这个点击事件的目标div时就是当前目标阶段。
        点击事件完成后，又会反过来逐层向外执行，先到body层，如果没有执行程序，在继续向外执行，最后一直到document层，还没有执行程序得话，就退出，这个过程就是冒泡阶段。
可以用下图来描述：
在这里插入图片描述
可以得出结论：

事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到到 DOM 最顶层节点的过程。（IE最早提出）
事件捕获：由 DOM 最顶层节点开始，然后逐级向下传播到到最具体的元素接收的过程。（网景最早提出）

我们可以更加形象的用在水里扔石头的现象来描述DOM事件流。
向水里面扔一块石头，首先它会有一个下降的过程，这个过程就可以理解为从最顶层向事件发生的最具体元素（目标点）的捕获过程；之后会产生泡泡，会在最低点（最具体元素）之后漂浮到水面上，这个过程相当于事件冒泡。
在这里插入图片描述

二、DOM事件流的验证

接下来我们就验证一下DOM事件流的过程，但是在验证之前，需要注意的是：

JS代码中只能捕获或者冒泡其中的一个阶段。
onclick 和 attachEvent只能得到冒泡阶段。
addEventListener(type, listener[, useCapture])第三个参数如果是 true，表示在事件捕获阶段调用事件处理程序；如果是false（不写默认就是false），表示在事件冒泡阶段调用事件处理程序。

这里我们通过addEventListener(type, listener[, useCapture])这个方法来验证。
比如我们现在有两个盒子，一个子盒子，一个父盒子，给他们设置一定的样式，代码如下所示：

<!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>
        .father{
            margin: 100px auto;
            width: 100px;
            height:100px;
            overflow: hidden;
            background-color: palegreen;
        }
        .son{
            width: 50px;
            height: 50px;
            margin-left: 25px;
            margin-top: 25px;
            background-color: paleturquoise;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

显示效果为：
在这里插入图片描述
我们给子盒子添加点击事件：

<script>
        var div = document.querySelectorAll('.div');
        div[1].addEventListener('click',function(){
            alert('son');
        })
    </script>

运行结果为：
在这里插入图片描述
        现在我们先来验证一下事件捕获阶段。即addEventListener(type, listener[, useCapture])第三个参数如果是 true。
        如下所示：
        我们给父盒子也添加一个点击事件，看看执行顺序

 <script>
        var father = document.querySelector('.father');
        var son = document.querySelector('.son');
       son.addEventListener('click',function(){
            alert('son');
        },true)
        father.addEventListener('click',function(){
            alert('father');
        },true)
    </script>

运行结果为：
在这里插入图片描述
        可以发现：当我们点击子盒子的时候，先出现父盒子的点击事件，然后在出现子盒子的点击事件，所以事件捕获就是：由 DOM 最顶层节点开始，然后逐级向下传播到到最具体的元素接收的过程。
        再来看看事件冒泡阶段，即addEventListener(type, listener[, useCapture])第三个参数如果是false。
        同上，我们给子盒子和父盒子都添加点击事件，看看他们的执行顺序。代码如下：

<script>
        var father = document.querySelector('.father');
        var son = document.querySelector('.son');
       son.addEventListener('click',function(){
            alert('son');
        },false)
        father.addEventListener('click',function(){
            alert('father');
        },false)
    </script>

运行结果为：
在这里插入图片描述
可以发现：当我们点击子盒子的时候，先出现子盒子的点击事件，然后在出现父盒子的点击事件，所以事件冒泡就是：事件开始时由最具体的元素接收，然后逐级向上传播到到 DOM 最顶层节点的过程。

你看懂了吗？

bear*6

关注

6
点赞
踩
7

收藏

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

事件流一、什么是DOM事件流二、DOM事件流的验证一、什么是DOM事件流        事件流描述的是从页面中接收事件的顺序。事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即 DOM 事件流。        DOM事件流分为三个阶段：捕获阶段当前目标阶段冒泡阶段    &nb
复制链接

扫一扫