JS DOM 事件流

最新推荐文章于 2024-05-29 21:49:39 发布

前端新手2022

最新推荐文章于 2024-05-29 21:49:39 发布

阅读量586

点赞数

分类专栏： JS 文章标签： javascript html5 开发语言

本文链接：https://blog.csdn.net/qq_35112578/article/details/126217301

版权

本文详细介绍了JavaScript中的DOM事件流，包括捕获阶段和冒泡阶段，并讲解了如何阻止事件传播，以及阻止默认行为。同时，对比了传统on注册与事件监听注册的区别，并介绍了事件委托的概念，强调其在性能优化上的优势。

摘要由CSDN通过智能技术生成

原理：利用事件冒泡，给父级添加事件，子集可以触发

实现：e.target 可以获得真正触发的子元素

事件流：事件完整执行过程中的流动路径

1、捕获阶段：从父元素到子元素

元素.addEventListener(事件，函数，是否捕获触发）

如果第三个参数为TRUE，则代表捕获阶段触发

如果第三个参数为FALSE，则代表冒泡阶段触发，默认为false

若用L0事件监听，则只有冒泡阶段，没有捕获阶段

2、冒泡阶段：从子元素到父元素

当事件被触发后，该事件会从子元素向其祖先元素依次触发

<!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>事件流</title>
    <style>
        .father {
            width: 500px;
            height: 500px;
            background-color: pink;
        }

        .son {
            width: 300px;
            height: 300px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        let father = document.querySelector('.father')
        let son = document.querySelector('.son')

        son.addEventListener('click', function () {
            alert('我是儿子')
        },true)

        father.addEventListener('click', function () {
            alert('我是爸爸')
        },true)
        document.addEventListener('click', function () {
            alert('我是爷爷')
        },true)
        
    </script>
</body>

</html>

阻止事件流发生

1、阻止事件对象

e.stopPropagation()

2、案例：阻止冒泡事件

<!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-s

最低0.47元/天解锁文章

前端新手2022

关注

0
点赞
踩
1

收藏

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

目录事件流：事件完整执行过程中的流动路径1、捕获阶段：从父元素到子元素2、冒泡阶段：从子元素到父元素阻止事件流发生1、阻止事件对象2、案例：阻止冒泡事件3、鼠标经过事件4、阻止默认行为两种注册事件的区别1、传统on注册L02、事件监听注册事件委托优点：提高性能原理：利用事件冒泡，给父级添加事件，子集可以触发实现：e.target 可以获得真正触发的子元素当事件被触发后，该事件会从子元素向其祖先元素依次触发阻止事件流发生1、阻止事件对象2、案例：阻止冒泡事件3、鼠标经过事件
复制链接

扫一扫

专栏目录