用事件委托减少Dom元素的事件绑定

当我们需要为一个父元素下的所有子元素绑定事件的时候，我们通常条件下的做法，获取到父元素下的所有子元素，然后循环为所有的子元素绑定事件。但是当子元素的数量很多的时候，过多的绑定事件为影响到页面的性能，同时新增的子元素没有被绑定上事件，除非手动地在循环一次，为所有的元素在绑定上事件。这时候事件委托或者叫事件代理就派上用场了。

事件委托是利用了js事件冒泡的原理，当子元素的事件被触发时，父元素中具有相同事件也会被触发。(也就是我们直接为父元素添加事件即可)

我们先看一下为子元素绑定事件的传统的做法：

var oParent = document.getElementById( 'parent' );
var ele = oParent.getElementsByTagName( 'div' );

for ( var i = 0; i < ele.length; i++ ){
ele[i].index = i+1;
ele[i].onclick = function(){
console.log( this.index );
}
}

我们看一下事件委托的写法：

html结构：

<ul id="oul">
<li>11</li>
<li>22</li>
<li>33</li>
<li>44</li>
<li>55</li>
</ul>
<button id="button">添加</button>  <!--测试新增加的元素中是否具有事件-->

script代码：

<script>
var oUl = document.getElementById( 'oul' );
var oBtn = document.getElementById( 'button' );

oUl.onclick = function( ev ){
var event = ev || window.event;
var target = event.target || event.srcElement;

if ( target.nodeName.toLowerCase() == 'li' ){

4000
console.log( target.innerText );
}
}

oBtn.onclick = function(){
var ele = document.createElement( 'li' );
ele.innerText = '新增的元素';
oUl.appendChild( ele );
}
</script>

运行的结果是：当点击任意一个li的时候，就会将li的内容打印到控制台上。之后再点击按钮新增加一个元素，新元素同样也能打印出自身的内容。在前面的一种做法中，新增加的元素是不能触发事件的，除非为新增加的元素绑定事件。



上一个例子中我们的子元素都是li元素，他们所共同拥有的事件是一样的，当我们要绑定不同的事件的时候，应该怎么做呢？

我的做法是为他们加上不同的属性然后通过这个属性来区分不同的li元素，为他们添加上不同的事件。

代码如下：

oUl.onclick = function( ev ){
var event = ev || window.event;
var target = event.target || event.srcElement;

if ( target.nodeName.toLowerCase() == 'li' ){
var id = target.id;
switch( id ){
case 'a' :
console.log( '我是id为a的li元素' );
break;
case 'c' :
console.log( '我是id为c的li元素' );
break;
default :
console.log( '我们是没有id属性的元素,内容是:'+target.innerText );
}
}
}

运行的结果截图：



好了，事件委托的浅显分享就到这里了，如果文中有哪里解释得不好的地方，欢迎大家给我指出。