部分代码:
<body>
<ul>
<li>这是一个li</li>
</ul>
<button type="button">添加li</button>
<script>
$(function(){
//添加新的li
$("button").click(function(){
$("ul").append("<li>这是新添加的li.....</li>")
});
//事件委托,li为委托方,ul为被委托方,click为委托的事件,function为回调函数
$("ul").delegate("li","click",function(){
$(this).css("background-color","red")
})
})
</script>
</body>
效果如下:
1、事件委托:
*将多个子元素(li)的事件监听委托给父辈元素(ul)处理
*监听回调是加在了父辈元素上
*当操作任何一个子元素(li)时,事件会冒泡到父辈元素(ul)
*父辈元素不会直接处理事件,而是根报event. target
得到发生事件的于元素(Li),通过这个子元素调用事件回调函数
2、事件委托的两方:
*委托方:业主li
*被委托方:中介ul
3、使用事件委托的好处
*添加新的子元素,自动有事件响应处理
*减少事件监听的: n==>1
4、 jQuery的事件委托API
*设置事件委托: $(parentSelector) . delegate(childrenSelector, eventName, callback)
*移除事件委托: $(parentSelector). undelegate(eventName)