事件委托浅谈

概念：

事件委托也叫事件代理，“事件代理”即是把原本需要绑定在子元素的响应事件（click、keydown…）委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。

举一个通俗的例子：有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台代为签收。现实当中，我们大都采用委托的方案。
前台收到快递后，会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是即使公司里来了新员工，前台也会在收到寄给新员工的快递后核实并代为签收。

这里其实还有2层意思的：

• 现在委托前台的同事是可以代为签收的，即程序中的现有的dom节点是有事件的；
• 新员工也是可以被前台代为签收的，即程序中新添加的dom节点也是有事件的；

原理：

​ 事件委托的原理用到的就是 目标元素 和 事件冒泡，把事件注册到父元素或父级以上的元素上，等待 子元素事件冒泡，并且在父元素或父级以上的元素注册的事件中能够 通过事件对象.target判断是哪个子元素，从而做相应处理。

  ① 给目标元素的父元素或父级以上的元素注册事件

​  ② 在父元素或父级以上元素注册的事件中通过 事件对象.target判断是哪个子元素

​  ③ 根据判断做出处理

普通方法与使用事件委托对比：

子节点实现相同的功能，实现功能是点击li，弹出6666：

1，普通方法

 首先找到ul，然后遍历li，然后点击li的时候，再找一次目标的li的位置，才能执行最后的操作，每次点击都要找一次li；

2，事件委托

只有点击li会触发事件，且每次只执行一次dom操作，如果li数量很多的话，将大大减少dom的操作，优化的性能可想而知。

讲解：

Event对象提供了一个属性叫target，可以返回事件的目标节点，我们称为事件源，也就是说，target就可以表示为当前的事件操作的dom，但是不是真正操作dom，当然，这个是有兼容性的，标准浏览器用ev.target，IE浏览器用event.srcElement，此时只是获取了当前节点的位置，并不知道是什么节点名称，这里我们用nodeName来获取具体是什么标签名，这个返回的是一个大写的，我们需要转成小写再做比较。