DOM事件委托

什么是事件委托

由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件委托。
通俗点讲就是委托一个元素帮我监听我本该监听的元素。

事件委托的原理

事件委托是利用事件的冒泡原理来实现的。事件从最深的节点开始，然后逐步向上传播事件，举个例子：页面上有这么一个节点树，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的爷爷

代码示例