原生js事件批量绑定-事件委托

我们常常会遇到一个需求，就是给表格里面的每个特定的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而已。所以对与其他元素的事件，我们不用处理。