一个小例子理解事件委托

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

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

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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值