Web前端入门第 75 问：JavaScript 性能优化之事件委托（事件代理）原理

如今 Vue 大行其道，大部分开发场景直接使用 @click 就实现了事件绑定，可能都没思索过 JS 中的事件性能优化。
事件委托原理

事件委托 其主要是利用了事件冒泡这个特性。
以点击事件 click 为例：将事件绑定在父元素上，点击子元素会通过冒泡的方式触发父元素的点击事件。这种绑定事件的方式，就称之为 事件委托，也称为 事件代理。
示例

利用事件委托实现点击 span 元素输出 span 元素内容：

1. <ul >
2.   div 内容
3.   <li>第 1 个 li 第 1 个 span 内容</li>
4.   <li>第 2 个 li 第 2 个 span 内容</li>
5.   <li>第 3 个 li 第 3 个 span 内容</li>
6.   <li>第 4 个 li 第 4 个 span 内容</li>
7.   <li>第 5 个 li 第 5 个 span 内容</li>
8.   <li>第 6 个 li 第 6 个 span 内容</li>
9.   <li>第 7 个 li 第 7 个 span 内容</li>
10.   <li>第 8 个 li 第 8 个 span 内容</li>
11. </ul>

复制代码

效果：
点击 div 和 li 元素都不会触发事件，点击 span 元素会在控制台输出元素内容。

优点

1、由于 JS 绑定的事件只有一个父元素，所以节省了内存。
2、无需针对每一个子元素绑定事件，所以减少了子元素的事件注册。
3、对于子元素的增删改不用再新注册事件，所以对子元素的操作要简单很多。
4、对于存在大量子元素的页面，由于减少了事件注册次数，所以可以提高页面性能。
缺点

既然事件委托那么有用，那么能不能直接将页面上所有的事件都委托到 body 元素上？
这想法很丰满，但显示很骨感啊，这种情况如果都绑定到最顶层的元素上，那么会导致所有的子元素都会事件冒泡，然后触发顶层元素的事件，这样反而无法做到性能优化，还造成了一些不必要的浪费，毕竟不是所有的子元素都需要响应事件！！
写在最后

性能优化这条路上，一直都存在各种话题，很多性能优化都是过犹不及，适当的场景用适当的方式才是最合理的。
代码编写并不是一蹴而就，很多时候，能实现功能就是好代码，至于性能，在一些小的需求场景，您写的代码可能都无法触发性能问题~~
坚持一个原则：不要过早优化。当我们的代码确实触发了性能问题，再考虑如何优化吧~~

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！