关于javaScript事件委托的那些事

今天是第一次写稿，还是有那么一丢丢小鸡冻。。。回归正题啦。。。

关于javaScript事件委托不得不说的那些事，为什么要使用事件委托？

我们可以这么说，假设老板要分配一项任务，首先要秘书叫A君来到办公室，任务分配结束后老板要秘书叫B君。。。以此类推。这样严重浪费了老板的时间，降低了工作效率。我们现在可以将这项任务委托秘书，由秘书统一分配给员工。这样工作效率明显提高了很多。由此我们引出了事件委托。

使用事件委托的原因：添加到页面上的事件处理程序数量直接关系到页面整体运行的性能。

函数对象占用内存，内存越多，性能越差。

事先指定所有事件处理程序导致DOM访问次数过多，延迟页面的交互就绪时间。

解决方案：利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

使用方法：在DOM树尽量最高的层次上添加一个事件处理程序。触发执行效果。

  方法一：由于事件目标是一个项，因此可以通过检查id属性决定采取适当操作。

         var lists = document.getElementById('lists');

        lists.addEventListener('onclick',function(event){

             var target = event.target;

             switch (target.id){

                                   case "li1":alert("我是第一个li"); break;

                                   case "li2":alert("我是第二个li"); break;

                                   case "li3":alert("我是第三个li"); break;

                                     }

              },false);

  方法二：父级处理函数包含在页面函数中，选中元素处理函数单独调用页面函数，在该函数中写被选元素的处理程序。（该方法适合给同类的子元素添加相同的效果）

结构：

      页面函数（父级元素，事件类型，被选元素，被选元素的处理函数名）{

                  获取父级的id;

                 页面处理函数（对父级元素了的子元素进行筛选）;

                 对父级元素绑定页面处理函数（或事件）；

                     }

//调用页面函数

      页面函数（父级元素，事件类型，被选元素，被选元素处理函数（）{

                    被选元素事件；}

代码：

         function pagefn(parentid,eventType,selector,elementfn){

          var parent = document.getElementById(parentid);

          console.log(parent)

          function handler(event){

          var target =event.target;

          if(target.id === selector){

          elementfn.call(target);

            }

           }

         parent[eventType] = handler;

}

pagefn('lists','onclick','li',function(){

this.style.backgroundColor = 'red';

});

 优点：

         1.document对象很快就可以访问，可以在页面生命周期任何时点添加事件处理程序；

         2. 在页面设置事件处理程序所需时间更少；

         3.页面占有的内存更少，提升性能。

适合使用事件委托的事件：click、mousedown、mouseup、keydowm、keyup、keypress。虽然mouseover和mouseout事件也冒泡，但要适当处理它们不容易，而且需经常计算元素位置（当元素从一个元素移到其子节点，或当鼠标移出该元素，都会触发mouseout事件）。

作为前端菜鸟第一次写博客还请大神多指教。