面试问题之事件委托的原理

最新推荐文章于 2025-06-14 21:19:31 发布

原创最新推荐文章于 2025-06-14 21:19:31 发布 · 3.4k 阅读

6 ·

CC 4.0 BY-SA版权

本文深入解析事件委托的工作机制，阐述事件源的概念，以及如何通过事件流实现事件的高效监听。通过实例说明，如何利用事件委托优化DOM操作，减少事件监听器的绑定，提高网页性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天面试问到的问题，你能说一下事件委托的原理吗？我就有点无法口述清楚了，回来以后好好梳理一下发现，如果说要讲清楚事件委托的原理，还是要追溯到事件源，即event.target,那么我先来讲一下事件源吧。

事件源是什么？？？

在事件中，当前操作的那个元素就是事件源。比如网页元素中a标签和input都有onclick事件，当点击a发生onclick事件时，事件源就是a标签，当点击input发送onclic事件是，事件源就是input。如何获取事件源那？？

IE下：window.event.srcElement  

标准下：event.target

https://blog.youkuaiyun.com/u014205965/article/details/45652073（要想搞明白js的事件机制，必须搞清楚几个概念：事件对象，事件源，还有事件流，该文讲述比较比较清晰）

再接下来讲讲事件委托的原理

当给父元素添加事件监听器时，事件监听器会分析从子元素冒泡上来的事件，找到到底是哪个子元素的事件。

<ul class="parent-ul">
 <li>aaaaa</li>
 <li>aaaaa</li>
 <li>aaaaa</li>
 <li>aaaaa</li>
 <li>aaaaa</li>
</ul>


// 找到父元素，添加监听器...
document.getElementById("parent-ul").addEventListener("click",function(e) {
    // e.target是被点击的元素!
    // 如果被点击的是li元素
    if(e.target && e.target.nodeName == "LI") {
        // 找到目标，输出ID!
        console.log("List item ",e.target.id.replace("post-")," was clicked!");
    }
});