什么是事件委托？
事件委托（也称作事件代理）是JavaScript中一种常见的编程技巧，它可以帮助我们更加高效地管理事件处理程序。事件委托的基本思路是将事件处理程序注册到它的父元素上，而不是在每个子元素上单独注册。这样，当事件在子元素上触发时，事件处理程序会被委托到父元素上处理。
网上的各位大牛们讲事件委托基本上都用了同一个例子，就是取快递来解释这个现象，我仔细揣摩了一下，这个例子还真是恰当，我就不去想别的例子来解释了，借花献佛，我摘过来，大家认真领会一下事件委托到底是一个什么原理：
有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台MM收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是即使公司里来了新员工（不管多少），前台MM也会在收到寄给新员工的快递后核实并代为签收。
这里其实还有2层意思的：
第一，现在委托前台的同事是可以代为签收的，即程序中的现有的dom节点是有事件的；
第二，新员工也是可以被前台MM代为签收的，即程序中新添加的dom节点也是有事件的。
为什么使用事件委托？
使用事件委托可以带来很多好处，包括：
- 减少内存占用：如果每个子元素都有自己的事件处理程序，那么这些处理程序将会占用很多内存。而使用事件委托，我们只需要在父元素上注册一个处理程序，就可以处理所有子元素的事件。
- 动态更新：如果我们添加或者删除了子元素，那么我们需要手动注册或者删除它们的事件处理程序。而事件委托，我们不需要担心这个问题，因为它是基于父元素的，无论如何父元素是不会变化的。
- 性能优化：当我们使用事件委托的时候，我们只需要注册一个事件处理程序，这样可以减少DOM操作的次数，提高性能。（访问DOM会引起重排和重绘，这是因为每次访问DOM时，浏览器都需要重新计算元素的位置和样式。这个过程涉及到很多计算，包括布局计算和绘制计算，所以非常耗费资源。如果我们频繁地访问DOM，那么就会导致性能问题。为了避免这个问题，我们可以尽可能地减少对DOM的访问，或者使用一些优化技巧，例如缓存DOM引用、使用文档片段等。）
如何实现事件委托？
实现事件委托的关键是事件冒泡。当一个事件在DOM树中被触发时，它会从最内部的元素开始冒泡，一直到最外层的元素。我们可以利用事件冒泡来实现事件委托。
下面是一个例子，我们为一个列表中的每个元素添加一个点击事件处理程序：
// 获取父元素
const parent = document.querySelector('.parent');
// 注册点击事件处理程序
parent.addEventListener('click', function(event) {
// 判断事件是否来自于子元素
if (event.target.classList.contains('child')) {
// 处理子元素的点击事件
console.log('Child element clicked!');
}
});
在上面的代码中，我们首先获取了父元素。然后，我们在父元素上注册了一个点击事件处理程序。在处理程序中，我们首先判断事件是否来自于子元素。如果是，那么我们就可以处理子元素的点击事件了。
PS：在上面的例子中，我们使用了 event.target.classList 来判断事件是否来自于子元素。 classList 是一个只读属性，返回一个元素的类名列表。我们可以使用它来判断一个元素是否包含特定的类名，例如上面的例子中的 .child 类名。
事件委托的应用
事件委托可以被广泛应用于各种场景中，例如：
- 对于动态生成的元素，我们可以使用事件委托来管理它们的事件处理程序。
- 在列表或表格等组件中，我们可以使用事件委托来处理行级别的操作。
- 在应用中，我们可以使用事件委托来处理全局操作，例如键盘快捷键等。
总之，事件委托是一种非常有用的技术，它可以帮助我们更加高效地管理事件处理程序。如果你还没有使用过事件委托，那么赶快尝试一下吧！
Comments NOTHING