Web前端入门第 75 问：JavaScript 性能优化之事件委托（事件代理）原理
<p>如今 Vue 大行其道，大部分开发场景直接使用 <code>@click</code> 就实现了事件绑定，可能都没思索过 JS 中的事件性能优化。</p><h2 id="事件委托原理">事件委托原理</h2>
<p><code>事件委托</code> 其主要是利用了事件冒泡这个特性。</p>
<p>以点击事件 <code>click</code> 为例：将事件绑定在父元素上，点击子元素会通过冒泡的方式触发父元素的点击事件。这种绑定事件的方式，就称之为 <code>事件委托</code>，也称为 <code>事件代理</code>。</p>
<h3 id="示例">示例</h3>
<p>利用事件委托实现点击 span 元素输出 span 元素内容：</p>
<pre><code class="language-html"><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>
</code></pre>
<p><strong>效果：</strong></p>
<p>点击 div 和 li 元素都不会触发事件，点击 span 元素会在控制台输出元素内容。</p>
<p><img src="https://img2024.cnblogs.com/blog/596097/202507/596097-20250703092653041-1681113845.gif"></p>
<h3 id="优点">优点</h3>
<p>1、由于 JS 绑定的事件只有一个父元素，所以节省了内存。<br>
2、无需针对每一个子元素绑定事件，所以减少了子元素的事件注册。<br>
3、对于子元素的增删改不用再新注册事件，所以对子元素的操作要简单很多。<br>
4、对于存在大量子元素的页面，由于减少了事件注册次数，所以可以提高页面性能。</p>
<h3 id="缺点">缺点</h3>
<p>既然事件委托那么有用，那么能不能直接将页面上所有的事件都委托到 <code>body</code> 元素上？</p>
<p>这想法很丰满，但显示很骨感啊，这种情况如果都绑定到最顶层的元素上，那么会导致所有的子元素都会事件冒泡，然后触发顶层元素的事件，这样反而无法做到性能优化，还造成了一些不必要的浪费，毕竟不是所有的子元素都需要响应事件！！</p>
<h2 id="写在最后">写在最后</h2>
<p>性能优化这条路上，一直都存在各种话题，很多性能优化都是过犹不及，适当的场景用适当的方式才是最合理的。</p>
<p>代码编写并不是一蹴而就，很多时候，能实现功能就是好代码，至于性能，在一些小的需求场景，您写的代码可能都无法触发性能问题~~</p>
<p>坚持一个原则：不要过早优化。当我们的代码确实触发了性能问题，再考虑如何优化吧~~</p>
</div>
<div id="MySignature" role="contentinfo">
<p> </p>
<p style="font-size: 18px;font-weight: bold;">文章首发于微信公众号【<span style="color:rgb(255, 71, 87)">前端路引</span>】，欢迎 <span style="color:#4ec259">微信扫一扫</span> 查看更多文章。</p>
<p>
<img style="max-width: 320px;" src="https://images.cnblogs.com/cnblogs_com/linx/2447020/o_250228035031_%E5%85%AC%E4%BC%97%E5%8F%B7%E4%BA%8C%E7%BB%B4%E7%A0%81.png"/>
</p>
<p>本文来自博客园，作者：前端路引，转载请注明原文链接：https://www.cnblogs.com/linx/p/18962960</p>
<p> </p><br><br>
来源：https://www.cnblogs.com/linx/p/18962960
頁:
[1]