JavaScript事件委托

最新推荐文章于 2024-10-10 10:50:43 发布

wenbin_666

最新推荐文章于 2024-10-10 10:50:43 发布

阅读量79

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44912955/article/details/120190133

版权

本文通过示例代码介绍了HTML中事件冒泡的概念，解释了当点击不同颜色的盒子时，事件如何从内到外依次触发。同时，讲解了事件委托的原理，即如何利用事件冒泡机制，通过将事件处理程序绑定到父元素来处理子元素的事件，从而简化代码并提高效率。文章还给出了一个列表删除示例，展示了事件委托在实际应用中的效果。

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

我们可以先看一下下面代码：

<!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>
    .big {
      width: 300px;
      height: 300px;
      background-color: tomato;
    }

    .center {
      width: 200px;
      height: 200px;
      background-color: yellow;
    }

    .small {
      width: 100px;
      height: 100px;
      background-color: skyblue;
    }
  </style>
</head>

<body>
  <div class="big">
    <div class="center">
      <div class="small"></div>
    </div>
  </div>

  <script>
    var big = document.querySelector('.big');
    var center = document.querySelector('.center');
    var small = document.querySelector('.big');
    big.onclick = function () {
      console.log('我是big');
    }
    center.onclick = function () {
      console.log('我是center');
    }
    small.onclick = function () {
      console.log('我是small');
    }
  </script>
</body>

</html>

当我点击蓝色盒子的时候会有哪些事件触发呢？
在这里插入图片描述

我们可以看到控制台打印了三句话，也就是说触发了三个事件。

当我点击红色盒子的时候。
在这里插入图片描述
只触发了一个事件。

这就涉及到了事件冒泡。

大家都知道html是数状结构。

在这里插入图片描述
事件的触发有上面这个阶段。

现在我只给big事件
在这里插入图片描述
给它打印一个e.target
当我点击谁就打印谁虽然只有一个事件。

这个target是什么呢？他就是事件在捕获阶段的最小元素，虽然我只给big绑定了事件，但是当我点击small的时候会打印small，点击center的时候会打印center。

再看一个例子。

<!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>苹果</li>
    <li>香蕉</li>
    <li>葡萄</li>
  </ul>

  <script>
    var ul = document.querySelector("ul");
    ul.onclick = function (e) {
      ul.removeChild(e.target);
    }
  </script>
</body>

</html>