JavaScript基础——事件流、事件委托

原创已于 2022-03-29 10:13:35 修改 · 2.5k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html #js

于 2022-03-29 10:13:03 首次发布

JavaScript基础专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了事件流的概念，包括事件捕获与事件冒泡两个阶段，并解释如何阻止事件传播。此外，还深入探讨了事件委托的技术原理及其优势。

文章目录

一、事件流
二、事件委托

一、事件流

1.1 事件流与两个阶段的说明

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

在这里插入图片描述

假设页面里有个div，当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段
捕获阶段：从父到子。冒泡阶段：从子到父

1.2 事件捕获和事件冒泡

1.2.1事件捕获阶段

事件捕获是指事件被触发时从DOM根元素开始去执行对应的事件（从里到外）

事件捕获需要写相应的代码才能看到效果：

DOM.addEventListener(事件类型,事件处理函数,是否使用捕获机制)

若在是否使用捕获机制处传入 true 则代表是捕获阶段触发，默认为false，代表冒泡阶段触发
若是用L0事件监听（元素.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>
        .father {
            margin: 100px auto;
            width: 500px;
            height: 500px;
            background-color: pink;
        }
        .son {

            width: 200px;
            height: 200px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        let fa = document.querySelector('.father')
        let son = document.querySelector('.son')
        fa.addEventListener('click', function () {
            alert('我是爸爸')
        }, true)
        son.addEventListener('click', function () {
            alert('我是儿子')
        }, true)
        document.addEventListener('click', function () {
            alert('我是爷爷')
        }, true)

        // btn.onclick = function() {}
    </script>
</body>
</html>

1.2.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>Document</title>
    <style>
        .father {
            margin: 100px auto;
            width: 500px;
            height: 500px;
            background-color: pink;
        }

        .son {

            width: 200px;
            height: 200px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        let fa = document.querySelector('.father')
        let son = document.querySelector('.son')
        fa.addEventListener('click', function () {
            alert('我是爸爸')
        })
        son.addEventListener('click', function () {
            alert('我是儿子')
        })
        document.addEventListener('click', function () {
            alert('我是爷爷')
        })

        // btn.onclick = function() {}
    </script>
</body>

</html>

1.3 阻止事件流动

因为默认就有冒泡模式的存在，所以就容易导致事件影响到父级。

组织事件流动需要拿到事件对象，语法：事件对象.stopPropagation()

此方法可以阻断事件流动传播，不仅阻断了冒泡阶段，在捕获阶段也有效

说明：

mouseover 和 mouseout 会有冒泡效果
mouseenter 和 mouseleave 没有冒泡效果

阻止默认行为

比如点击链接不跳转，点击表单不提交等。语法：e.preventDefault()

二、事件委托

事件委托是指利用事件流的特征解决一些开发需求的技巧

优点：给父级元素加事件（可以提高性能）
原理：事件委托其实是利用事件冒泡的特点，给父元素添加事件，子元素可以触发
实现：事件对象.target可以获得真正触发事件的元素

测试代码，自行测试


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

    </style>
</head>

<body>
    <ul>
        <li>我是第1个小li</li>
        <li>我是第2个小li</li>
        <li>我是第3个小li</li>
        <li>我是第4个小li</li>
        <li>我是第5个小li</li>
    </ul>
    <script>
        // 不要每个小li注册事件了  而是把事件委托给他的爸爸 
        // 事件委托是给父级添加事件 而不是孩子添加事件
        let ul = document.querySelector('ul')
        ul.addEventListener('click', function (e) {
            // alert('我点击了')
            // 得到当前的元素
            // console.log(e.target)
            e.target.style.color = 'red'
        })
    </script>
</body>

</html>