事件委托机制

事件委托机制

     事件委托机制是利用的是冒泡的原理的，把事件的监听转换到其父元素上，也就是把事件绑定到父元素上面，然后在事件中获取子元素的对象，对其进行相应的操作。

优点是：

1）能够提高性能，有些时候，如果一个元素中有许多的子元素，而且子元素上都需要有事件的绑定的话，我们给每一个子元素都添加一个事件的话，显得繁琐，而且很多时候都需要遍历父元素中的子元素。这时候，我们就可以使用事件委托机制，把需要绑定到子元素上的事件，都监听到父元素上，当触发子元素的事件的时候，因为冒泡的机制就会触发到父元素的事件，然后我们在事件中获取得到触发该事件的子元素的对象，对其进行相应的操作。

2）减少代码量。而且新添加的元素也可以直接绑定到事件的，不需要额外去绑定事件，因为事件已经绑定在父元素上了。

     事件冒泡：事件促发的最深层元素首先接受事件，然后是它的父元素，然后依次往上，直到document对象接受最终的事件。

下面给一个例子说明事件委托机制的原理。

将鼠标悬浮至某个元素上，就会出现黄色的背景，然后点击按钮，可以往页面上添加元素，同时新添加的元素也是可以有悬浮然后出现黄色背景的效果。

	
		
    
    
		
		
	
	
		
    
    

		
     
     
		
     
     
1111
2222
3333
4444
	
    
    
	
<script type="text/javascript">
	var btn = document.getElementById("btn");
	var uls = document.getElementById("ul1");
	var length = uls.getElementsByTagName("li").length;
	btn.onclick = function(){
		var li = document.createElement("li");
		length+=1;
		li.innerHTML = length*1111;
		console.log(li);
		uls.appendChild(li);
	}
	uls.onmouseover = function (event){
		var event = event || window.event;
		var target = event.target || event.srcElement;
		if(target&&target.nodeName==="LI"){
			target.style.background="yellow";
		}
	}
	uls.onmouseout = function (event){
		var event = event || window.event;
		var target = event.target || event.srcElement;
		if(target&&target.nodeName==="LI"){
			target.style.background="";
		}
	}
</script>