用事件委托减少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的内容打印到控制台上。之后再点击按钮新增加一个元素,新元素同样也能打印出自身的内容。在前面的一种做法中,新增加的元素是不能触发事件的,除非为新增加的元素绑定事件。


用事件委托减少Dom元素的事件绑定_第1张图片



上一个例子中我们的子元素都是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 );
            }
      }
}


运行的结果截图:


用事件委托减少Dom元素的事件绑定_第2张图片


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



你可能感兴趣的:(html,css,javascript,jquery,性能)