原生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而已。所以对与其他元素的事件，我们不用处理。