js-事件-CSDN博客

本文链接：https://blog.csdn.net/chengyu12138/article/details/133716878

本文介绍了JavaScript中的事件流机制，包括事件从DOM根元素开始的捕获过程，以及事件冒泡的概念。此外，还讲解了事件解绑的方法，如使用removeEventListener，以及事件委托的优势和应用实例。

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

一、事件流

概念

从DOM的根元素开始去执行对应的事件（从外到里）

时间的捕获需要对应的代码才看得到效果
代码：

document.addEventListener(事件类型, 事件处理函数, 捕获机制)

addEventListener第三个参数传入true代表是捕获阶段触发，传入false代表冒泡阶段触发，默认就是false

例如

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

      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>

    const fa = document.querySelector('.father')

    const son = document.querySelector('.son')

    document.addEventListener('click', function () {

      alert('1')

    }, true)

    fa.addEventListener('click', function () {

      alert('2')

    }, true)

    son.addEventListener('click', function () {

      alert('3')

    }, true)



  </script>

</body>

点击紫色块时：依次弹出

二、事件冒泡

事件冒泡概念：

当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。即当一个元素触发事件后，会依次向上调用所有父级元素的同名事件。

例：

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

      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>

    const fa = document.querySelector('.father')

    const son = document.querySelector('.son')

    document.addEventListener('click', function () {

      alert('1')

    })

    fa.addEventListener('click', function () {

      alert('2')

    })

    son.addEventListener('click', function () {

      alert('3')

    })



  </script>

</body>

当点击紫色块时：依次弹出3，2，1

阻止冒泡：

把事件限制在当前元素内。

先要拿到事件对象

语法：

事件对象.stopPropagation()

这种方法也可以在捕获阶段使用

三、事件解绑

on事件方式，直接使用null覆盖偶就可以实现事件的解绑

语法：

事件对象.removeEventListener(事件类型, 事件处理函数)

匿名函数无法被解绑

四、事件委托

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

优点：减少注册次数，可以提高程序性能
原理：给父元素注册事件，当我们触发子元素时，会冒泡到父元素身上，从而触发父元素的事件
实现：事件对象.target.tagName可以获得真正触发事件的元素

例如：

<body>

  <ul>

    <li>第1个孩子</li>

    <li>第2个孩子</li>

    <li>第3个孩子</li>

    <li>第4个孩子</li>

    <li>第5个孩子</li>

    <p>我不需要变色</p>

  </ul>

  <script>

    // 点击每个小li 当前li 文字变为红色

    // 按照事件委托的方式  委托给父级，事件写到父级身上

    // 1. 获得父元素

    const ul = document.querySelector('ul')

    ul.addEventListener('click', function (e) {

      // 我的需求，我们只要点击li才会有效果

      if (e.target.tagName === 'LI') {

        e.target.style.color = 'red'

      }

    })

  </script>

</body>