20k的前端是这样写事件委托的

要理解​<code>​DOM​</code>​相关事件，我们先要理解​<code>​“事件流”​</code>​这个概念，事件流描述的是从页面中接收事件的顺序。

事件冒泡：事件开始由最具体的元素接收，然后逐级向上传播到较为不具体的节点或文档。

事件捕获：事件开始由不太具体的节点接收，然后逐级向下传播到最具体的节点。它与事件冒泡是个相反的过程。

​<code>​DOM2​</code>​ 级事件规定的事件流包括三个阶段：事件捕获、目标阶段、事件冒泡。

文章转载：乐字节

事件委托，通俗的说就是将元素的事件委托给它的父级或者更外级的元素处理，它的实现机制就是事件冒泡。

假设有一个列表，要求点击列表项弹出对应的字段：

存在问题：

给每一个列表都绑定事件，消耗内存

当有动态添加的元素时，需要重新给元素绑定事件

事实上很多同学在网上看到的事件委托的方法都是错的，虽然是错的，但是你面试的时候也可能会过，因为面你的面试官可能也不知道正确的事件委托应该怎么写。

下面我们就来看一下错误版的事件委托是怎么写的：

错误版事件委托的​<code>​bug​</code>​ 在于，如果用户点击的是 ​<code>​li​</code>​里面的 ​<code>​span​</code>​，就没法触发 ​<code>​fn​</code>​，这显然不对。

那下面我们来看一下正确的事件委托应该怎么写：

思路是点击 ​<code>​span​</code>​后，递归遍历 ​<code>​span​</code>​ 的祖先元素看其中有没有 ​<code>​ul​</code>​ 里面的 ​<code>​li​</code>​。

事件委托的优点

只需要将同类元素的事件委托给父级或者更外级的元素，不需要给所有的元素都绑定事件，减少内存占用空间，提升性能。

动态新增的元素无需重新绑定事件

需要注意的点

事件委托的实现依靠的冒泡，因此不支持事件冒泡的事件就不适合使用事件委托。

不是所有的事件绑定都适合使用事件委托，不恰当使用反而可能导致不需要绑定事件的元素也被绑定上了事件。

告诫自己，即使再累也不要忘记学习，成功没有捷径可走，只有一步接着一步走下去。 共勉！

文章中如有不对的地方，欢迎小伙伴们多多指正。

谢谢大家~ 💘

哈喽，在学编程，学Java的小伙伴们，一个人摸黑学会很难，up也是过来人，欢迎大家加入我的一个Java交流裙：​​ ​933873310​​​ 暗号：75 这里给大家准备了配套视频、书籍等学习资源，还有接单技巧