利用事件冒泡的特性,给父元素绑定事件,然后判断事件对象,来给父元素的每个子元素添加事件,而不是直接在所有的子元素上绑定事件:
<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,也可以触发事件