15.1 问题
ul>li*1000
假如我们要对li的点击事件进行处理，通常情况下我们会这么写：
$(function(){
$('li').click(function(e){
console.log($(this).index()); // 输出当前下标
})
});
但是这里li有1000个，每个li都做点击事件绑定，性能上是很消耗的。
这时事件委托就派上用场了。我们可以把监听处理转移ul上，当对li进行点击的时候，点击事件会传递到ul上并触发事件。这时候我们可以通过事件的target属性获取到真正点击的元素，并进行处理。
$(function(){
$('ul').click(function(e){
if(e.target.nodeName == 'LI') {
console.log($(e.target).index()); // 输出当前下标
}
})
});
15.2 其他使用场景
事件委托，除了上面提到的避免对数量庞大的重复节点进行事件从而减少性能消耗外，还有一个很实用的使用场景就是：避免对新添加的节点进行重复的事件绑定。
这样，我们就可以再添加新节点的时候，不需要再考虑单独为新添加的节点进行事件绑定，从而减少冗余的而不必要的工作量。
<!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函数
上面的实现，我们也可以使用jQuery封装的事件委托函数delegate，写法如下：
$(function(){
$('ul').delegate('li', 'click', function(){
$('ul').append( $('<li>/'));
});
});
网友评论