网站备案手续费北京搜索引擎优化经理

注：纯手打，如有错误欢迎评论区交流！
转载请注明出处：https://blog.csdn.net/testleaf/article/details/148636477
编写此文是为了更好地学习前端知识，如果损害了有关人的利益，请联系删除！
本文章将不定时更新，敬请期待！！！
欢迎点赞、收藏、转发、关注，多谢！！！

【1】事件委托

事件委托是一种利用 ​​事件冒泡（Event Bubbling）​​ 机制，将子元素的事件监听委托给父元素统一处理的优化技术。它能够显著减少事件监听器的数量，提升性能，并动态处理新增元素。

核心原理​​：

• ​​事件冒泡​​：当子元素触发事件（如点击），事件会向上冒泡到父元素、祖先元素，直到 document。
• ​​委托逻辑​​：在父元素上监听事件，通过 event.target 判断实际触发的子元素，执行对应逻辑。

实现示例​​：
​​场景​​：一个 <ul> 包含多个 <li>，点击任一 <li> 时高亮它。
​​传统方法（直接绑定）​：

document.querySelectorAll('li').forEach(li => {li.addEventListener('click', () => {li.style.backgroundColor = 'yellow';});
});

问题​​：每个 <li> 都绑定监听器，数量多、性能差，且新增 <li> 需手动绑定。

​​事件委托方法​：

document.querySelector('ul').addEventListener('click', (event) => {// 检查触发的是否是 <li>if (event.target.tagName === 'LI') {event.target.style.backgroundColor = 'yellow';}
});

优势​​：

• 只需一个监听器。
• 自动支持动态新增的 <li>。