在js中DOM事件绑定可以与用户进行各种各样的交互，处理很多事情。但在页面中添加过多的时间处理程序将直接影响到页面整体的运行性能。原因：首先每个函数都是一个对象，都会占用内存（对象存储在堆内存中）；内存中的对象越多，性能越差。其次，必须事先指定所有事件处理程序而导致的DOM访问次数会延迟整个页面的交互就绪时间。
解决这个问题有两种方式：事件委托、移出事件的处理程序。此处先讲解事件委托技术的原理，关于代码后续添加。
2、事件委托：利用时间冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。（使用事件委托技术只需要在DOM树中尽量最高的层次上添加一个事件处理程序）这种技术需要占用的内存更少。适用于：所有用到按钮的事件（多数鼠标和键盘事件）如果可行的话，也可以考虑为document对象添加一个事件处理程序，用以处理页面上发生的某种特定类型的事件，这样处理的好处是：
（1）document对象很快就能访问，而且可以在页面的声明周期的任何时间点上为它添加事件处理程序（无需等待DOMContentLoaded或load事件）。也就是说，只要可单机元素呈现在页面上，就可以立即具备适当的功能。
（2）在页面中设置事件处理程序所需要的时间更少。只添加一个事件处理程序所需的DOM引用更少，所花的时间也更少。
（3）整个页面占用的内存空间更少，能够提升整体性能。
3、最适合采用事件委托技术的事件有：click mousedown mouseup keydown keyup keypress。虽然mouseover和mouseout事件也冒泡，但要适当处理它们不容易，而且经常需要计算元素的位置。（因为当鼠标从一个元素移到其子节点时，或者当鼠标移出该元素时，都会触发mouseover事件）
事件委托简单范例：
EventUtil = {
// 给对象绑定事件
addHandle: function(element,type,fn) {
if(element.addEventListener) {
element.addEventListener(type,fn);
}else if(element.attachEvent) {
element.attachEvent("on"+type,fn);
}else {
element["on"+type] = fn;
}
},
// 给对象消除事件
removeHandle: function(element,type,fn) {
if(element.removeEventListener) {
element.removeEventListener(type,fn);
}else if(element.detachEvent) {
element.detachEvent("on"+type,fn);
}else {
element["on"+type] = null;
}
},
//获取event事件
getEvent: function(e) {
return e||window.e;
},
//获取事件目标对象
getTarget: function(e) {
return e.target||e.srcElement;
},
};
(function() {
var oBox = document.querySelector("all"),
oBox1 = document.querySelector(".one"),
oBox1 = document.querySelector(".two"),
oBox1 = document.querySelector(".three");
EventUtil.addHandle(oBox,"click",handle(event))
function handle(event) {
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
switch(target) {
case "oBox1":
//执行代码
break;
case "oBox2":
//执行代码
break;
case "oBox3":
//执行代码
break;
}
}
})();