写点什么

Web 前端入门:JavaScript 性能优化之事件委托(事件代理)原理

  • 2025-07-04
    福建
  • 本文字数:1110 字

    阅读完需:约 4 分钟

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


事件委托原理


事件委托 其主要是利用了事件冒泡这个特性。

以点击事件 click 为例:将事件绑定在父元素上,点击子元素会通过冒泡的方式触发父元素的点击事件。这种绑定事件的方式,就称之为 事件委托,也称为 事件代理


示例


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

<ul class="parent">  <div>div 内容</div>  <li>第 1 个 li <span>第 1 个 span 内容</span></li>  <li>第 2 个 li <span>第 2 个 span 内容</span></li>  <li>第 3 个 li <span>第 3 个 span 内容</span></li>  <li>第 4 个 li <span>第 4 个 span 内容</span></li>  <li>第 5 个 li <span>第 5 个 span 内容</span></li>  <li>第 6 个 li <span>第 6 个 span 内容</span></li>  <li>第 7 个 li <span>第 7 个 span 内容</span></li>  <li>第 8 个 li <span>第 8 个 span 内容</span></li></ul>
<script> (() => { const parent = document.querySelector('.parent') parent.addEventListener('click', (event) => { const target = event.target // 判断事件响应元素是否是 span if (target.tagName.toLocaleLowerCase() === 'span') { console.log(target.innerText) } }) })()</script>
复制代码


效果:


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



优点


1、由于 JS 绑定的事件只有一个父元素,所以节省了内存。

2、无需针对每一个子元素绑定事件,所以减少了子元素的事件注册。

3、对于子元素的增删改不用再新注册事件,所以对子元素的操作要简单很多。

4、对于存在大量子元素的页面,由于减少了事件注册次数,所以可以提高页面性能。


缺点


既然事件委托那么有用,那么能不能直接将页面上所有的事件都委托到 body 元素上?

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


写在最后


性能优化这条路上,一直都存在各种话题,很多性能优化都是过犹不及,适当的场景用适当的方式才是最合理的。


代码编写并不是一蹴而就,很多时候,能实现功能就是好代码,至于性能,在一些小的需求场景,您写的代码可能都无法触发性能问题~~


坚持一个原则:不要过早优化。当我们的代码确实触发了性能问题,再考虑如何优化吧~~


文章转载自:前端路引

原文链接:https://www.cnblogs.com/linx/p/18962960

体验地址:http://www.jnpfsoft.com/?from=001YH

用户头像

还未添加个人签名 2023-06-19 加入

还未添加个人简介

评论

发布
暂无评论
Web前端入门:JavaScript 性能优化之事件委托(事件代理)原理_Java_不在线第一只蜗牛_InfoQ写作社区