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

本文深入解析事件委托的工作机制,阐述事件源的概念,以及如何通过事件流实现事件的高效监听。通过实例说明,如何利用事件委托优化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!");
    }
});

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值