《简述事件委托》

132 阅读1分钟

事件委托

事件委托就是我委托一个元素帮我监听我本来应该监听的东西。比如说onclick

事件委托的优点

  1. 节省监听数(内存) 例子: 给100个按钮添加点击事件,咋办?

答:监听这个100个按钮的祖先,等冒泡的时候判断target是不是这个100个按钮中的一个

事件委托1.PNG

事件委托2.PNG

事件委托3.PNG

  1. 可以监听动态元素 例子:需要监听不存在的元素的点击事件,怎么办?

答:通过监听祖先,等点击的时候看是不是我想要监听的元素即可

事件委托-1.PNG

事件委托-2.PNG

事件委托-3.PNG

事件委托-4.PNG

封装事件委托

只要实行一个函数就可以实现一个事假委托 例子:写出这个样一个函数on('click','#div1', 'button',fn),当用户点击#div1的时候,调用fn函数,做成事件委托

on('click','#div1','button',()=>{
  console.log('button 被点击了')
})

1.PNG

2.PNG

3.PNG

4.PNG