2.事件委托 之“11”漫谈——event delegation

今天讲讲事件委托，以小故事来开篇吧，不愿意看，直接跳到最后。

眼看双十一就要来了，周围的人寻思估摸着要“剁手，吃土”了，购物车里，那是加了一件又一件。话说马云师兄，咳咳，鄙人不才，同一母校，导开了电商之路后，那快递，可是摞了一叠，叠了再摞，纸山袋海。额，不好意思，接个电话，“喂，您的快递到了，麻烦签收一下”，“好的好的”。快递行业，雄起，快递小哥的工资也是“蹭蹭蹭”往上涨。这说明什么，说明人的购物欲望之强烈，还是十分之强烈。话说回来，快递到了，得要签收吧，有时人不在家，快递小哥辛苦一趟，这可是白做功呀。菜鸟驿站应运而生，而小区有小区快递物流管理，公司有公司前台领取，这就形成了“事件委托”，将个人领取快递的事件，委托给了区域内统收快递的事件。比如说，咱们来说谈谈小区快递吧。

在一个微有冷风吹的日子，在一个高大明亮的小区门口，双十一之后的一周内，来的快递不胜枚举，而小区，安全管理起见，是不允许快递进来滴，不好意思；

假使一：小区无快递代收服务，场景：小区门口。

EMS快递小哥：“喂，您的快递到了，我已经在小区门口了”，“喂，您的……”，“喂，您的……”

而后，顺丰快递小哥也跟着来了，“喂，您的……”，“喂……”，“喂……”；

然后你知道的，小区门口很多快递堆着，很多人挤着，造成交通阻塞。人拿快递相当于函数，是个对象，会占用门口的空间，对象多了，门口的空间小了，拿到自己快递的效率也就低了。紧接着韵达也来了，额……拿快递的人数量太多了，何况赶上双十一呢，直接影响到整体拿快递的运作性能。

小赵.addEventListener('电话'， function(){ console.log("拿顺丰快递") });

小钱.addEventListener('电话'， function(){ console.log("拿EMS快递") });

小孙.addEventListener('电话'， function(){ console.log("拿顺丰快递") });

小李.addEventListener('电话'， function(){ console.log("拿EMS快递") });

仁兄可否想象那种场景，快递哥还赶着下一个收货人区域呢，晕了……怎可这般办事，夫子曰：不可取，不可取，此性差也，而耗时矣。

假使二：快递委托小区代收，统放在云柜里，有各自的柜号。快递人放好快递，走了，锵锵锵，行往下个目的地。

小区云柜.addEventListener('短信'，小区人物，function(e){

    switch(e.target.id) {

      case "小赵"：

        “云柜000取快递”；

        break;

        case "小钱"：

          “云柜001取快递”；

          break;

        case "小孙"：

          “云柜002取快递”；

          break;

    }

});

中间多了如斯步骤，虽然最终结果是相同的，用户拿到自己的快递，但自从有了事件委托，中间耗的时间少了，路也不堵了，干活活轻松。

那，换言之，用程序员族的方言来讲，每个函数都是对象，会占用内存，而占用的内存（空间）越多，性能也就越差，就像之前的假使一快递，这是其一；其二，指定的事件处理程序的DOM访问次数增加（快递小哥电联每个用户），会延迟页面的交互时间（拿快递耗时）。而事件委托的出现，是为了解决事件处理程序过多（拿快递人太多）的问题。它利用了事件冒泡的机制，为DOM树中尽可能高的层次（小区管理）添加事件处理程序。一般而言，会委托document对象（类似小区管理），一则因为document对象可以很快访问，二则因为document可以作用于页面上呈现的元素。如此，DOM引用少，时间少，占用内存空间少，性能也就跐溜地提升了。

一个比喻，如有想法，请多多指教。