事件委托
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:绑定事件的元素,不一定是触发事件的元素(有可能是其父元素)