我們常常會遇到一個需求，就是給表格裡面的每個特定的td繫結一個事件.

遇到這種需求，很多人基本都會想到如下程式碼：

   var td = document.getElementsByTagName("td");
   for( let i =0; i<td.length; i++){
      td[i].onclick = function(){
           //事件處理
      } 
  }

以上程式碼的確可以正常執行，但是當該類td很多是，效率會很低，佔用的記憶體也會很大。
而比較好的方法是用事件委託的機制，事件委託主要是依靠一下兩個特性。

• 1.瀏覽器事件的冒泡機制
  瀏覽器的事件發生有一般有三個階段(IE瀏覽器事件沒有捕獲階段)。
  事件捕獲 ->事件目標 ->事件冒泡，事件冒泡會將事件從事件目標節點處一級一級向父節點傳播，直到document物件。換句話說，我們可以在父節點處理子節點的事件。

• 2.事件物件的 event.target指向事件目標，即是事件發生的的具體節點

下面是事件委託的方法
這裡假設只有一個table，且將事件的處理繫結到table中，當然也可以繫結在body或者td的父元素或其他祖先元素裡。

   var table = document.getElementsByTagName("table")[0]; 
   if(window.attachEvent){
      table.attachEvent("onclick",function(event){
         //event.target即是點選處的元素。
         if(event.target.nodeName !== "TD"
 
){//這裡通過元素名稱過濾,也可以通過其他方法過濾。        return;          
          } 
          //事件處理邏輯 
      });
   } else{
       table.addEventListener("click",function(event){
         if(event.target.nodeName !== "TD"){//這裡通過元素名稱過濾,也可以通過其他方法過濾。        return;          
          } 
          //事件處理邏輯 
      });
   }

以上事件過濾是因為事件委託時，table下所有的元素都會觸發事件，而我們需要處理的只是固定td而已。所以對與其他元素的事件，我們不用處理。