#前端面试#谈谈事件委托

事件委托

1.什么是事件委托?

​ 1.将子元素的时间委托(绑定)给父元素的

2.事件委托的好处(为什么这样做)

​ 1.假设有一个ul里面有100个li,我们现在需要向每一个li 绑定一个点击事件

如果什么都不考虑的话,我们可以拿到这个li的数组,然后来进行循环遍历,分别去绑定,

这样的话可以实现,但是我们需要循环遍历100次,效率就比较差,还有一个重要的原因是:假设后期我又添加了100个li,那么后期添加的li并没有点击事件。因为之前循环遍历的时候,那个ul里面只有100个。这个问题的解决方法就是,将子元素的点击事件绑定到父元素ul上面去,这样就算是后面添加的li也会拥有绑定事件了。

====》这样的好处是:

我们的点击事件只需要绑定一遍就可以了===>减少绑定的次数

后面添加的元素,也能够使用我们的绑定事件===》后期添加的元素也可以享用我们之前委托的事件

3.事件委托的原理

​ 1.冒泡

4.触发事件的是谁

​ 1.子元素(然后冒泡到父元素身上,触发之前绑定的事件)

5.如何找到触发事件的对象(触发的子元素,那么我们怎么在众多的子元素中找到我们想要触发的子元素)

1.event.target

这里我们要清楚一个知识点:

​ 我们用事件委托的时候,我们绑定的事件是在父元素,但是真正触发事件的是子元素。所以,我们能够得出一个结论:event.target指向的元素不一定是当初绑定事件的元素,有可能是父元素,典型的案例就是我们的事件委托。

2.补充:target和currentTarget的区别

  • currentTarget:要求绑定的元素一定是触发事件的元素(这样我们才能通过它,找到我们触发事件的元素)
  • target:绑定事件的元素,不一定是触发事件的元素(有可能是其父元素)
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值