事件冒泡、事件委托和事件捕获

最新推荐文章于 2024-04-12 23:43:08 发布

ToShy

最新推荐文章于 2024-04-12 23:43:08 发布

阅读量499

点赞数 1

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/ToShy/article/details/108775455

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

事件冒泡会从当前触发的事件目标一级一级往上传递，依次触发，直到document为止。

事件捕获会从document开始触发，一级一级往下传递，依次触发，直到真正事件目标为止。

事件委托依靠的就是事件冒泡和捕获的机制。

事件冒泡

一个很简单的例子，生活中，当你玩手机点击一个应用时，同时也代表你点击了手机屏幕。
网页中以下面的这个小例子来说明：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<style type="text/css">
  #box1 {
    width: 400px;
    height: 400px;
    background: blueviolet;
  }

  #box2 {
    width: 200px;
    height: 200px;
    background: aquamarine;
  }

  div {
    overflow: hidden;
    margin: 50px auto;
  }
</style>

<body>
  <div id="box1">
    <div id="box2">
      <div id="box3"></div>
    </div>
  </div>
  <script>
    function sayBox2() {
      console.log('你点了小的box');
    }
    function sayBox1() {
      console.log('你点了大的box');
    }
    // 事件监听，第三个参数是布尔值，默认false，false是事件冒泡，true是事件捕获
    document.getElementById('box2').addEventListener('click', sayBox2, false);
    document.getElementById('box1').addEventListener('click', sayBox1, false);

  </script>
</body>

</html>

我定义了两个盒子，一个大盒子一个小盒子，当我点击这个小盒子时，会发现大盒子中绑定的方法也被执行了，这就是一个很简单的事件冒泡，因为，当你点击这个小盒子的同时也点击了这个大盒子，根据事件机制一层一层向父元素传递。
在这里插入图片描述

事件捕获

将上面代码里监听事件的第三个参数改为true，然后点击小box，和冒泡一样，也是两个box都触发了事件，但是顺序反过来了，这种现象称为事件捕获。：
在这里插入图片描述

事件委托（事件代理）

通过监听一个父元素，来给不同的子元素绑定事件，减少监听次数，从而提升速度，这就是所谓的事件委托。

例如:现在有一个ul，ul里又有100个li，我想给这100个li都绑定一个点击事件，我们一般可以通过for循环来绑定，但是要是有1000个li呢？为了提高效率和速度，所以我们这时可以采用事件委托，只给ul绑定一个事件，根据事件冒泡的规则，只要你点了ul里的每一个li，都会触发ul的绑定事件，我们在ul绑定事件的函数里通过一些判断，就可以给这100li都触发点击事件了。