一个小例子理解事件委托

首先简单介绍一下这个小案例的要求：这是一个点赞的功能。用户单击点赞，该点赞按钮由彩色变成灰色，并且被单击的点赞按钮被替换成已采纳的标识。且其他地方的点赞按钮变成灰色，并禁止被点击。

分析一下这个案例：回答列表会很多。点赞按钮肯定也会有很多个。虽然可以通过jquery的隐士迭代来给被点击的对象加上点击事件，来达到这个效果。但是如果数据了特别大，就会影响到代码的性能。因为jquery会在后面不停的循环这些元素。这个时候我们就可以利用事件冒泡的特点，来解决这个问题。即“事件委托”

我们的解决方案是不给具体的采纳按钮增加click（）方法。而是给最外面的document来使用点击事件。这样就避免了jquery不段的在内部循环查找被单击的对象了。

$(document).on(‘click’,’.caina_span’,function(e){ var block=$(‘.zan’).css(‘display’);
if($.trim(block)==’block’){ return false; } var positionY=e.pageY; var positionX=e.pageX;$(‘.zan’).css({“top”:+(positionY-50)+”px”,”left”:+(positionX-100)+”px”,”display”:”block”});
$(‘.caina_span’).removeClass(‘clicked’);$(this).hide();
})
解释一下这个代码：
通过给祖先元素document增加单击事件。jquery会把单击对象跟on的第二个参数做比较。如果是true则执行操作