15.1 問題
ul>li*1000
假如我們要對(duì)li的點(diǎn)擊事件進(jìn)行處理，通常情況下我們會(huì)這么寫：
$(function(){
$('li').click(function(e){
console.log($(this).index()); // 輸出當(dāng)前下標(biāo)
})
});
但是這里li有1000個(gè)，每個(gè)li都做點(diǎn)擊事件綁定，性能上是很消耗的。
這時(shí)事件委托就派上用場(chǎng)了。我們可以把監(jiān)聽處理轉(zhuǎn)移ul上，當(dāng)對(duì)li進(jìn)行點(diǎn)擊的時(shí)候，點(diǎn)擊事件會(huì)傳遞到ul上并觸發(fā)事件。這時(shí)候我們可以通過事件的target屬性獲取到真正點(diǎn)擊的元素，并進(jìn)行處理。
$(function(){
$('ul').click(function(e){
if(e.target.nodeName == 'LI') {
console.log($(e.target).index()); // 輸出當(dāng)前下標(biāo)
}
})
});
15.2 其他使用場(chǎng)景
事件委托，除了上面提到的避免對(duì)數(shù)量龐大的重復(fù)節(jié)點(diǎn)進(jìn)行事件從而減少性能消耗外，還有一個(gè)很實(shí)用的使用場(chǎng)景就是：避免對(duì)新添加的節(jié)點(diǎn)進(jìn)行重復(fù)的事件綁定。
這樣，我們就可以再添加新節(jié)點(diǎn)的時(shí)候，不需要再考慮單獨(dú)為新添加的節(jié)點(diǎn)進(jìn)行事件綁定，從而減少冗余的而不必要的工作量。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
ul li {
margin: 5px;
background-color: #7B68EE;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(function(){
$('ul').click(function(e){
if(e.target.nodeName == 'LI') {
$('ul').append( $('<li>/'));
}
})
});
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
</ul>
</body>
</html>
15.3 jQuery的delegate函數(shù)
上面的實(shí)現(xiàn)，我們也可以使用jQuery封裝的事件委托函數(shù)delegate，寫法如下：
$(function(){
$('ul').delegate('li', 'click', function(){
$('ul').append( $('<li>/'));
});
});
