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

给每个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,也可以触发事件