WebAPI-事件委托

怼烎@ 2023-06-15 11:13 23阅读 0赞

## 概述 ##

事件委托（也叫事件代理）主要是用来解决后生成的子元素（动态添加的元素）的事件绑定问题，有动态创建进来的新元素不需要重新绑定事件。

实现原理：将事件绑定在已存在的父级元素上，当触发子元素时，会通过事件冒泡，事件会冒泡到父元素身上，通过父级元素的事件去对应的子元素。

## 特点 ##

*  只操作了一次 DOM ，减少了内存消耗提高了程序的性能；
 *  只要父元素存在，动态创建的新的子元素也拥有事件，不需要再注册相同的事件。

举个现实中的例子：

> 到了中午，一个宿舍的哥们都要去买午饭，要么每个人都去买，要么把这件事情委托给宿舍中的某个人（叫“爸爸”），要么让这个人一次性去买，然后再根据床位将其一 一分发给指定的同学；在这里，买午饭就是一个事件，每个哥们指的是需要响应事件的 DOM 元素，而出去买饭的就是代理的元素（父级元素），这个元素就是真正绑定事件的元素。

如果有许多的子元素需要添加相同的事件，通过循环为每个子元素添加相同事件会非常浪费资源，所以通过事件委托将事件注册到父元素上，通过冒泡触发。

代码示例：

<ul id="box">
      <li>li标签1</li>
      <li>li标签2</li>
      <li>li标签3</li>
      <li>li标签4</li>
      <li>li标签5</li>
      <li>li标签6</li>
      <li>li标签7</li>
      <li>li标签8</li>
    </ul>
    <script type="text/javascript"> function $(selector) { return document.querySelector(selector) } // 为父级元素添加点击事件 $('#box').onclick = function(e) { // e.target 获取触发事件的元素（不一定是绑定事件的元素） console.log('触发了父级的点击事件', e.target.innerHTML) } </script>

CSS：

![在这里插入图片描述][20191122170950542.gif]

[20191122170950542.gif]: https://img-blog.csdnimg.cn/20191122170950542.gif