不正经的前端 | 八股什么是事件代理（事件委托），使用场景
题干
- 事件代理（事件委托）
题解
事件代理又叫事件委托，它是一种 JS 中常用的绑定事件的技巧。它的原理是利用事件冒泡，把原本需要绑定在子元素的响应事件委托给父元素，让父元素担当事件监听的角色。这样可以避免对子元素进行遍历绑定，提高性能和效率，也方便动态添加或删除子元素。
事件代理（事件委托）的使用场景有以下几种：
- 列表项点击：如果有一个列表，列表中有大量的列表项，我们需要在点击列表项的时候响应一个事件。如果给每个列表项都绑定一个事件处理函数，那么会消耗很多内存和资源。而如果使用事件代理，就可以把点击事件绑定在列表的父元素上，然后在事件处理函数中判断点击的目标元素是否是列表项，从而执行相应的逻辑。
- 动态添加或删除元素：如果有一个容器，容器中的元素可以被用户动态地添加或删除，我们需要对这些元素进行一些操作。如果使用普通的绑定方式，那么每次添加或删除元素都需要重新绑定或解绑事件处理函数，这样很麻烦也很低效。而如果使用事件代理，就可以把事件绑定在容器上，然后在事件处理函数中判断操作的目标元素是否是容器中的元素，从而执行相应的逻辑。
- 表单验证：如果有一个表单，表单中有多个输入框，我们需要对输入框进行一些验证。如果给每个输入框都绑定一个验证函数，那么会增加代码量和复杂度。而如果使用事件代理，就可以把验证事件绑定在表单上，然后在事件处理函数中判断触发验证的目标元素是否是输入框，从而执行相应的验证逻辑。
相关
贡献者
isboyjc