简述JS中的event delegate

在javasript中delegate这个词经常出现，看字面的意思，代理、委托。

什么是delegate？我们为什么要使用delegate？

它究竟在什么样的情况下使用？它的原理又是什么？

这次就针对javascript delegate的用法和原理进行介绍。

---

什么是事件委托：

事件委托，通俗地来讲，就是把一个元素响应事件（click、keydown……）的函数委托到另一个元素

一般会把事件委托到它的父层或者更外层DOM树中较高的元素节点，真正绑定事件的是父元素或外层元素而不是其本身

当事件响应到需要绑定的元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数

一个网上流传的例子：

有三个同事预计会在周一收到快递。为签收快递，有两种办法：

一是三个人在公司门口等快递

二是委托给前台MM代为签收。

现实当中，我们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台MM收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是即使公司里来了新员工（不管多少），前台MM也会在收到寄给新员工的快递后核实并代为签收。

---

为什么要用事件委托：

事件委托减少了dom操作，提高性能

在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间，这就是为什么性能优化的主要思想之一就是减少DOM操作的原因；如果要用事件委托，就会将所有的操作放到js程序里面，与dom的操作就只需要交互一次，这样就能大大的减少与dom的交互次数，提高性能；

---

事件委托的原理：

事件委托的实践是利用事件冒泡的机制来实现的

---

事件委托怎么实现？

我们对li元素进行操作时，不用事件委托时，一般通过dom操作获取需要的操作的li节点，如果我们要对每个li都进行相同的操作，需要通过getElementById方法获取每一个li对其编写执行语句。或者通过for循环

这中写法会对每一个li节点进行dom操作，如果里面li有动态的增减需求，li变多会影响整体运行性能 

采用事件委托的写法

直接给li的父元素ul列表注册点击事件，通过event对象对ul中的元素进行监控，当ul中有li被点击时，由于事件冒泡，同时也会触发ul上注册的点击事件，上面函数中的e.currentTarget指的是注册事件的ul元素，e.target指的是被点击的元素。这样只需给父元素进行dom操作注册相应事件就能操作其中包含的所有元素。

---

什么是事件冒泡？

事件冒泡（dubbed bubbling）：通俗的理解就是，当鼠标点击或者触发dom事件时，浏览器会从所点击的dom节点开始由内到外进行事件传播，即点击了子元素，如果父元素注册了对应的事件的话，在子元素触发后会接着触发父元素绑定的事件。

Demo

在点击子元素时，同时也是点击了整个页面，如果页面中子元素的父级元素也绑定有点击事件，就会逐级从子元素到祖先元素依次触发。

---

参考文献：

(转)陈鑫伟的博客

(转)tony1223