js中的事件流

写不出代码真君
206 阅读4分钟

什么是事件流

事件流（Event Flow）是指在文档对象模型（DOM）中，当用户交互（如点击、键盘输入等）触发一个事件时，这个事件如何在 DOM 树中传播的过程。

这么说大家可能看不懂,那么我们接下来看一段代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red{
            width: 400px;
            height: 400px;
            background-color: red;
        }
        .green{
            width: 300px;
            height: 300px;
            background-color: green;
        }
        .blue{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="red">
        <div class="green">
            <div class="blue"></div>
        </div>
    </div>

    <script>
        let red=document.querySelector('.red');
        let green=document.querySelector('.green');
        let blue=document.querySelector('.blue');
         red.addEventListener('click',function(){
            console.log('red');
        })
        green.addEventListener('click',function(){
            console.log('green');
        })
        blue.addEventListener('click',function(e){
            console.log('blue');
        })
    </script>
</body>
</html>

这里我放了红,绿,蓝三个盒子,三个盒子为嵌套关系,如图:

image.png

并且我还在上面绑定了点击事件,当我点击蓝色盒子时控制台会如何输出呢?

image.png

这里就不得不说起事件流了,事件流有三个阶段:

事件流的三个阶段

1.捕获阶段--事件行为从window上向目标元素传播

2.目标阶段--事件到达目标元素,在目标元素上触发事件

3.冒泡阶段--事件从目标元素向window上传播

当我点击蓝色盒子的时候,个点击事件都被触发了,且js中的事件离开目标处后默认都是在冒泡阶段触发的,所以整个流程会是当蓝色盒子被点击时,作为从外到内的容器依次被捕获,在目标元素上触发事件,最后从内到外依次冒泡,所以会是先蓝在绿最后红.

addEventListener

在js中addEventListener内其实有三个参数,当第三个参数不写时默认为false,即js中的事件离开目标处后默认都是在冒泡阶段触发的,当我们将其改为true时,js中的事件离开目标处后在捕获阶段触发.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red{
            width: 400px;
            height: 400px;
            background-color: red;
        }
        .green{
            width: 300px;
            height: 300px;
            background-color: green;
        }
        .blue{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="red">
        <div class="green">
            <div class="blue"></div>
        </div>
    </div>

    <script>
        let red=document.querySelector('.red');
        let green=document.querySelector('.green');
        let blue=document.querySelector('.blue');
         red.addEventListener('click',function(){
            console.log('red');
        },true)
        green.addEventListener('click',function(){
            console.log('green');
        },true)
        blue.addEventListener('click',function(e){
            console.log('blue');
        },true)
    </script>
</body>
</html>

还是上面的代码,仅仅是加了个true,此时的结果为:

image.png

阻止冒泡

1.e.stopPropagation()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red{
            width: 400px;
            height: 400px;
            background-color: red;
        }
        .green{
            width: 300px;
            height: 300px;
            background-color: green;
        }
        .blue{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="red">
        <div class="green">
            <div class="blue"></div>
        </div>
    </div>

    <script>
        let red=document.querySelector('.red');
        let green=document.querySelector('.green');
        let blue=document.querySelector('.blue');
        red.addEventListener('click',function(){
            console.log('red');
        })
        green.addEventListener('click',function(){
            console.log('green');
        })
        blue.addEventListener('click',function(e){
            console.log('blue');
            e.stopPropagation()
        })
    </script>
</body>
</html>

这里我在蓝色盒子中加上了e.stopPropagation(),此时结果为:

image.png

当点击了蓝色盒子后,从外向内经过了捕获阶段和目标阶段,而到了冒泡阶段时,最内层的蓝色盒子将冒泡阻止了,阻断了事件流向外冒泡,所以不打印绿色和红色了.

2.e.stopImmediatePropagation()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red{
            width: 400px;
            height: 400px;
            background-color: red;
        }
        .green{
            width: 300px;
            height: 300px;
            background-color: green;
        }
        .blue{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="red">
        <div class="green">
            <div class="blue"></div>
        </div>
    </div>

    <script>
        let red=document.querySelector('.red');
        let green=document.querySelector('.green');
        let blue=document.querySelector('.blue');
        red.addEventListener('click',function(){
            console.log('red');
        })
        green.addEventListener('click',function(){
            console.log('green');
        })
        blue.addEventListener('click',function(e){
            console.log('blue');
            e.stopImmediatePropagation()
        })
        blue.addEventListener('click',function(e){
            console.log('hello');
        })
    </script>
</body>
</html>

这里我们第一次在蓝色盒子上绑定点击事件后再绑定的一个点击事件(addEventListener可以对一个dom结构多次进行事件绑定但onclick不行,onclick会覆盖旧事件),此时的结果为:

image.png

e.stopImmediatePropagation()不仅阻止了冒泡和事件流的传播,还让蓝色盒子上新的事件绑定不会再生效.

事件代理

要求:在html中有一个ui标签,里面有很多li标签,当点击li标签时打印li标签里面的内容

我们当然可以这么写:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

    <script>
       
         let liElements = document.querySelectorAll('li');

         // 遍历所有 <li> 并为每个元素添加点击事件监听器
         liElements.forEach(function (li) {
             li.addEventListener('click', function () {
                 // 输出被点击的 <li> 的文本内容到控制台
                 console.log(li.textContent || li.innerText);
             });
         });


       


    </script>
</body>

</html>

但是这样写的话更加占用内存空间,借用事件流机制我们就可以这样写:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

    <script>
        let ul = document.querySelector('ul');
        ul.addEventListener('click', function (e) {
            console.log(e.target.innerText);
        })


    </script>
</body>

</html>

当我们点击li标签时必定冒泡到ul标签上,每一个事件上都会有一个事件参数e来详细记录事件的各种信息,其中的e.target.innerText就可以让我们知道点击的li标签的内容,这样写更加节省内存空间还更加简约.

avatar
文章
阅读
粉丝