委托事件和jquery中的delegate方法

利用事件冒泡的特性,给父元素绑定事件,然后判断事件对象,来给父元素的每个子元素添加事件,而不是直接在所有的子元素上绑定事件:

<ul>

  <li></li>

  <li></li>

  <li></li>

</ul>

给每个li绑定事件:

li.addEventListener('click',function(){console.log(this)});

通过委托来给li绑定事件:

ul.addEventListener('click',function(e){
   if(e.toElement.tagName=='li'){
       console.log(this);
       return false
   }
})

后者只绑定了一次事件,性能上要优于前者.

 

jquery中提供了更强大的相关方法:delegate

    var ul= $('ul');
    ul.delegate('li','click',function(e){
        console.log(e);
        console.log(this);
    })

这样添加的事件,即使是动态添加的li,也可以触发事件