用事件委托减少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结构：

    
11
    
22
    
33
    
44
    
55

添加  

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 );
            }
      }
}

运行的结果截图：

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