关于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事件）。

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