- 事件委托的使用地点
- 事件委托的原理
- jQuery中封装耳朵事件委托
问题
将ajax请求回来的数据动态的拼接到html骨架中时，要给这些元素添加事件。
<ul id="main">
</ul>
...
$.ajax({
url:"",
data:"",
success:function(data){
for(var i=data.length-1;i>=0;i--){
($("<li></li>"),{
class:'data[0].class'
}).appendTo("#main");
}
}
})
可以给li直接添加onclick事件。
或者使用事件委托（event delegation）。
原理
事件委托是为父元素添加一个监听器，当子元素要添加事件时，事件监听器会分析冒泡上来的事件，从而找到是哪一个子元素执行的事件
基本写法
// 为父元素添加监听器...
document.getElementById("main").addEventListener("click",function(e) {
// e.target是被点击的元素，如果被点击的是li元素
if(e.target && e.target.nodeName == "LI") {
// 找到目标并输出
console.log("这个li的id为"+e.target.id);
}
});
当然，这种方法在jQuery也有封装
$("div").delegate("button","click",function(){
$("p").slideToggle();
});
div标签下的button标签被点击时，p标签显示或隐藏。
