事件代理學(xué)習(xí)與總結(jié)

     事件代理（Event Delegation），又稱之為事件委托。是 JavaScript 中常用綁定事件的常用技巧。很容易理解這個(gè)名稱，“事件代理”即是把原本需要綁定的事件委托給父元素，讓父元素?fù)?dān)當(dāng)事件監(jiān)聽的職務(wù)。
     事件代理的用處是？對于Javascript，添加到頁面的事件程序數(shù)量會(huì)直接關(guān)系到頁面的整體運(yùn)行性能，在javascript中每個(gè)函數(shù)都是對象，都會(huì)在內(nèi)存中占用一定的空間，對象越多性能就越差，還有，DOM操作是十分消耗性能的，添加多個(gè)事件就會(huì)增多DOM的訪問次數(shù)，所以會(huì)延遲整個(gè)頁面的交互就緒事件。而事件代理的核心思想，就是通過盡量少的綁定，去監(jiān)聽盡量多的事件。從而達(dá)到，從一方面提升性能。

     事件代理核心是：事件冒泡以及目標(biāo)元素。

     最適合采用事件委托技術(shù)的事件有：click,mousedown.mouseup,keydown,keyup,和keypress.

   舉例：建立這樣一個(gè)表格，對每一行中的每一列元素，要求點(diǎn)擊后彈出對應(yīng)的值，為每行添加一個(gè)類TR，每列添加一個(gè)類為TD，效果圖如下：

window.onload=function(){   	    
	     //沒有使用事件代理，為16個(gè)td分別添加點(diǎn)擊事件  
	     var TDObjs=document.getElementsByClassName('TD');//通過類名選出每一行中的每一列
	     for(var i=0;i<TDObjs.length;i++){
	     	 EventUtil.addHandler(TDObjs[i],"click",function(event){//通過for循環(huán)為每一行中的每一列添加click事件（注冊16個(gè)點(diǎn)擊事件）
	     	     event=event||window.event;
	       	      var target=EventUtil.getElement(event);
	     	      alert(target.innerText);
	     	 	});
	     }
	     //使用事件委托來解決上面為每一個(gè)td項(xiàng)增加事件,而改變?yōu)槊恳恍衪r添加事件，只需要添加4個(gè)點(diǎn)擊事件，就可以達(dá)到上面的效果	  
	     var TRObjs=document.getElementsByClassName('TR');//獲得表格的行對象
	     for(var i=0;i<TRObjs.length;i++){
	     	//對每一行添加事件程序，進(jìn)而操作里面的每一個(gè)td列（注冊4個(gè)點(diǎn)擊事件）
	     	  EventUtil.addHandler(TRObjs[i],"click",function(event){
	     	 event=event||window.event;
	       	 var target=EventUtil.getElement(event);
	       	 //通過switch語句分別對每一行中的每一列就行操作
	       	 switch(target.id){
	       	 	case "td1":
                alert(target.innerText);              
	       	    break;
	       	    case "td2":
	       	    alert(target.innerText);
	       	    break;
	       	     case "td3":
	       	    alert(target.innerText);
	       	    break;
	       	      case "td4":
	       	    alert(target.innerText);
	       	    break;
	       	    case "td5":
	       	    alert(target.innerText);
	       	    break;

                    等等..對列進(jìn)行的操作
	       	 	   
	       	 }
	       	    });
	     }
	   
	       	    
	       	 	

總結(jié)：

      將每一個(gè)td上的事件，改到它的父元素上tr上進(jìn)行注冊監(jiān)聽，避免了大量的注冊監(jiān)聽事件，可以稍微提高性能，

這個(gè)表格事件委托中，有一個(gè)問題：在往上級(jí)，用table注冊事件函數(shù)，但tr,td無法響應(yīng)，這個(gè)在后期的學(xué)習(xí)中會(huì)留意其真正原理?？傊录羞€是很好的一項(xiàng)技術(shù)，利用這樣的思想，在使用事件時(shí)，

     （1）盡可能去限制一個(gè)頁面中的事件處理程序的數(shù)量，數(shù)量太多會(huì)占用大量的內(nèi)存，而且也會(huì)讓用戶感覺頁面不夠靈敏。進(jìn)而盡量去使用事件委托技術(shù)，可以有效地減少事件處理程序的數(shù)量