事件委托

事件委托

目的一：减少内存消耗

场景一：

• 你要给100个按钮添加点击事件，怎么办？
• 如果给每个列表项一一都绑定一个函数，那对于内存消耗是非常大的，效率上需要消耗很多性能；
• 监听这100个按钮的父层元素，等冒泡的时候再去匹配判断是否为目标元素

目的二 ：动态绑定事件

场景二：

• 你要监听目前不存在的元素的点击事件，怎么办？
• 在很多时候，我们需要通过 AJAX 或者用户操作动态的增加或者去除列表项元素，那么在每一次改变的时候都需要重新给新增的元素绑定事件或者给即将删去的元素解绑事件
• 如果用了事件委托就没有这种麻烦了，因为事件是绑定在父层的，和目标元素的增减是没有关系的，监听父层元素，等点击时看看是不是我想要监听的元素即可
• 所以使用事件在动态绑定事件的情况下是可以减少很多重复工作的

事件委托的优点：

• 省监听数（所有东西都在内存里的，相当于省内存）
• 可以监听动态元素

封装事件委托

在应对更多场景上我们可以把事件代理的功能封装成一个公用函数，这样就可以重复利用了

写出这样一个函数on('click','#testDiv','li',fn)

当用户点击#testDiv里的li元素时,调用fn函数调用到事件委托

判断target是否匹配'li

直接上代码：

instanceof 运算符用来检测 constructor.prototype 是否存在于参数 object 的原型链上。