DOM事件流

最新推荐文章于 2024-06-12 11:59:04 发布

Triumph-light

最新推荐文章于 2024-06-12 11:59:04 发布

阅读量138

点赞数

分类专栏：前端文章标签： javascript html5 css

本文链接：https://blog.csdn.net/Triumph_light/article/details/120164724

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

DOM事件流

在这里插入图片描述

定义：

事件流指的是从页面中接受事件的顺序，事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即为DOM事件流。

阶段：

1.捕获阶段：事件从Document节点自上而下向目标节点传播的阶段
2.当前目标阶段：真正的目标节点正在处理事件的阶段
3.冒泡阶段：事件从目标节点自上而下向Document节点传播的阶段

接下来测试一下：
测试方法：利用方法监听注册事件方式来进行addEventListener事件监听方式：eventTarget.addEventListener（type事件类型字符串并不需要带on，listener事件处理函数，useCapture可选参数布尔值，如果是true则处于捕获阶段，如果是false或者不写则处于冒泡阶段）
由于javascript默认为冒泡排序，如果要测试冒泡阶段，将直接绑定事件，如果要测试捕获阶段，要在addEventListener（）这个方法中将最后一个参数改成true，变成捕获阶段，则可测试捕获阶段
在这里插入图片描述

 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Document</title>
 9     <style>
10         .father {
11             overflow: hidden;
12             width: 300px;
13             height: 300px;
14             margin: 100px auto;
15             background-color: pink;
16             text-align: center;
17         }
18         
19         .son {
20             width: 200px;
21             height: 200px;
22             margin: 50px;
23             background-color: purple;
24             line-height: 200px;
25             color: #fff;
26         }
27     </style>
28 </head>
29 
30 <body>
31     <div class="father">
32         <div class="son">son盒子</div>
33     </div>
34     <script>
35         var son = document.querySelector('.son');
36         son.addEventListener('click', function() {
37             console.log('son');
38         }, true);
39         var father = document.querySelector('.father');
40         father.addEventListener('click', function() {
41             console.log('father');
42         }, true);
43         document.addEventListener('click', function() {
44             console.log('document');
45         }, true);
46     </script>
47 </body>
48 
49 </html>

其输出结果：
在这里插入图片描述

<script>
 2         var son = document.querySelector('.son');
 3         son.addEventListener('click', function() {
 4             console.log('son');
 5         }, false);
 6         var father = document.querySelector('.father');
 7         father.addEventListener('click', function() {
 8             console.log('father');
 9         }, false);
10         document.addEventListener('click', function() {
11             console.log('document');
12         })
13     </script>

结果：
在这里插入图片描述
但在实际开发中，我们将会很少用到事件捕获，我们更加关注事件冒泡，其中有些事件也是没有冒泡的，例如onblur，onfocus，onmouseenter，onmouseleave

事件对象：

定义：在监听函数的小括号里，它是系统自动创建的，不需要我们传参，事件对象是事件的一系列相关数据集合，跟事件相关

阻止事件冒泡的两种方式：

e.stopPropagation（）；
e.cancelBubble=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>
        ul {
            width: 100px;
            margin: 50px auto;
        }
        li {
            list-style: none;
            background-color: blanchedalmond;
            margin: 5px 0;
            text-align: center;
        }
        li:hover {
            background-color: white;
        }
    </style>
</head>
<body>
    <ul>
        <li>点我</li>
        <li>点我</li>
        <li>点我</li>
        <li>点我</li>
        <li>点我</li>
    </ul>
    <script>
        var ul=document.querySelector('ul');
        ul.addEventListener('click',function(){
            alert('1');
        })
    </script>
</body>
</html>

Triumph-light

关注

0
点赞
踩
0

收藏

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

DOM事件流定义：事件流指的是从页面中接受事件的顺序，事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即为DOM事件流。阶段：1.捕获阶段：事件从Document节点自上而下向目标节点传播的阶段2.当前目标阶段：真正的目标节点正在处理事件的阶段3.冒泡阶段：事件从目标节点自上而下向Document节点传播的阶段接下来测试一下：测试方法：利用方法监听注册事件方式来进行addEventListener事件监听方式：eventTarget.addEventListener（type事件
复制链接

扫一扫