什么是事件委托
由于事件会在冒泡阶段向上传播到父节点,因此可以把子节点的监听函数定义在父节点上,由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件委托。
通俗点讲就是委托一个元素帮我监听我本该监听的元素。
事件委托的原理
事件委托是利用事件的冒泡原理来实现的。事件从最深的节点开始,然后逐步向上传播事件,举个例子:页面上有这么一个节点树,div>ul>li>a;比如给最里面的a加一个click点击事件,那么这个事件就会一层一层的往外执行,执行顺序a>li>ul>div,有这样一个机制,那么我们给最外面的div加点击事件,那么里面的ul,li,a做点击事件的时候,都会冒泡到最外层的div上,所以都会触发,这就是事件委托,委托它们父级代为执行事件。
事件委托的实现
在这之前先来看两个场景
- 场景一
问:要给100个按钮添加点击事件,应该怎么做。
答:监听这100个按钮的祖先,等冒泡的时候判断target是不是这100个按钮当中的一个
常规思路是遍历这100个按钮,每个都监听,这样的话就添加了100个监听器,会导致占用过多的内存的问题。
代码示例 - 场景二
问:你要监听目前不存在的元素的点击事件,咋办?
答:监听祖先,等点击的时候看看是不是我想要监听的元素即可
代码示例
优点
- 减少监听数量,整个页面的内存占用减少,提高性能
- 可以监听动态生成的元素比如场景二
封装事件委托
要求
写出这样一个函数 on('click', '#div1', 'button', fn)
当用户点击 #tdiv1 里的 button 元素时,调用 fn 函数
要求用到事件委托
方法一这个答案是错的,但是在面试时是可以用的
方法一:判断 target 是否匹配 'button'
代码示例
方法二
递归判断 target / target的爸爸 / target的爷爷