js事件委托

原理

利用js的事件冒泡原理，把onclick，onmouseenter等事件绑定到父节点上，这样做的好处是：

 1.避免多次循环，例如给ul的li增加样式；

 2.可以给动态增加的节点绑定事件，例如ul中新增的li也需要有事件；

 3.代码简洁，便于维护；

 4.复用函数对象，优化性能；

 

 原生js实现

//跨浏览器绑定事件

function addEventHandler(ele,evt,handler){
if(ele.addEventListener){
ele.addEventListener(evt,handler,false);
}else if(ele.attachEvent){
ele.attachEvent("on"+evt,handler);
}else{
ele["on"+evt] = handler;
}
}

//事件委托；

function delegate(parent,child,action,callback){
	addEventHandler(parent,action,function(e){
             var e = e||window.event;
             var target = e.target || e.srcElement;
		if(child==e.target.tagName.toLowerCase()){
			console.log("Click Event");
			callback();
		}
	})
}

delegate(ul,'li','click',function(){});

 

　　这里要注意ie 和 w3c的事件源不同；