js事件委托

1、什么是事件委托：

     事件就是onclick，onmouseover，onmouseout，等事件，事件委托就是把事件添加到某个元素上，让这个元素来完成这个事件。事件是利用冒泡的原理，把事件加到父级上，触发执行效果。

好处：1，提高性能。

一个父级里面有成百上千的子元素，要为每个子元素添加同样的事件，我们可以利用事件委托给父级添加事件，这样就不必遍历所有的子元素了，从而提高了性能

如：鼠标经过li时改变颜色，离开时恢复

<ul id="ul">
	<li>111111</li>
	<li>222222</li>
	<li>333333</li>
        <li>444444</li>
	<li>555555</li>
	<li>666666</li>
 </ul>

 

window.onload = function(){
	var oUl = document.getElementById("ul");
	var oLi = oUl.getElementsByTagName("li");

	for(var i=0; i<oLi.length; i++){
		oLi[i].onmouseover = function(){
			this.style.background = "red";
		}
		oLi[i].onmouseout = function(){
			this.style.background = "";
		}
	}
}

当li很多的时候，利用for循环为每个li添加事件比较影响性能。

下面利用事件委托的方式来实现这样的效果。html不变

window.onload = function(){
	var oUl = document.getElementById("ul");
	var aLi = oUl.getElementsByTagName("li");

/*
这里要用到事件源：event 对象，事件源，不管在哪个事件中，只要你操作的那个元素就是事件源。
ie：window.event.srcElement
标准下:event.target
nodeName:找到元素的标签名
*/
	oUl.onmouseover = function(ev){
		var ev = ev || window.event;
		var target = ev.target || ev.srcElement;
		//alert(target.innerHTML);
		if(target.nodeName.toLowerCase() == "li"){
		target.style.background = "red";
		}
	}
	oUl.onmouseout = function(ev){
		var ev = ev || window.event;
		var target = ev.target || ev.srcElement;
		//alert(target.innerHTML);
		if(target.nodeName.toLowerCase() == "li"){
		target.style.background = "";
		}
	}
}

 

好处2，新添加的元素还会有之前的事件。

我们还拿这个例子看，但是我们要做动态的添加li。点击button动态添加li

如：

<input type="button" value="添加" id="btn"/>
<ul id="ul">
	<li>111111</li>
	<li>222222</li>
	<li>333333</li>
        <li>444444</li>
	<li>555555</li>
	<li>666666</li>
 </ul>

使用for循环无法为刚添加的li添加事件，因为点击添加的时候for循环已经执行完毕。

使用事件委托

window.onload = function(){
	var oUl = document.getElementById("ul");
	var aLi = oUl.getElementsByTagName("li");
	var oBtn = document.getElementById("btn");
	var iNow = 4;

	oUl.onmouseover = function(ev){
		var ev = ev || window.event;
		var target = ev.target || ev.srcElement;
		//alert(target.innerHTML);
		if(target.nodeName.toLowerCase() == "li"){
		target.style.background = "red";
		}
	}
	oUl.onmouseout = function(ev){
		var ev = ev || window.event;
		var target = ev.target || ev.srcElement;
		//alert(target.innerHTML);
		if(target.nodeName.toLowerCase() == "li"){
		target.style.background = "";
		}
	}
	oBtn.onclick = function(){
		iNow ++;
		var oLi = document.createElement("li");
		oLi.innerHTML = 1111 *iNow;
		oUl.appendChild(oLi);
	}
}