jQuery事件中on实现绑定多个事件

相信大家都知道在jQuery1.9版本中,已经去掉了livedelegate方法,从而将on方法的地位进一步提升。

jQuery如此推崇on方法,必有其独到的地方。所以我们就有必要了解这个on,并在代码中利用它,从而优化代码和提高性能。那么接下来我们就来看看on的使用方法

一、使用on进行普通事件绑定

1.1 使用on绑定一个事件

语法结构: jq对象.on(“事件类型”,”事件处理函数”)
在这里插入图片描述

1.2 使用on绑定多个事件对应同一个事件处理

函数语法结构:jq对象.on(“事件类型1 事件类型2”,”事件处理函数”)
在这里插入图片描述

1.3 使用on绑定多个事件对应不同的事件处理函数

语法结构:

jq对象.on({

           事件类型1 : 事件处理函数1,

           事件类型2 : 事件处理函数2,

           事件类型3 : 事件处理函数3

           });

在这里插入图片描述

注意: 使用jQueryon进行普通绑定事件的时候,会出现一些小小问题,就是不能给动态添加的元素绑定事件,
在这里插入图片描述

这时候就要用到on的事件委派(事件委托),接下来我们继续看看on对于事件委托的处理

二、 使用on进行事件委派

2.1 标准浏览器中都有事件冒泡(bubble)或捕获(propagate)机制

如图:
在这里插入图片描述

当目标元素被触发时,先从它祖先元素一层一层将事件传达给目标函数,如上图中P的父元素 div依次传递给target,此为事件捕获;

–当目标函数被触发后,又将事件一层一层传递到根节点,即老祖宗,此为事件冒泡。所有浏览器都有事件冒泡机制。所以,我们可以利用这一特性,优化代码,减少事件绑定。

on方法也利用了这一特性。当‘selector’被提供时,就是事件委托,事件触发时,直接绑定在on方法上的元素是不会触发该事件,而它指定的后代元素‘selector’就会利用冒泡机制,到直接绑定在on方法上的元素,给予处理。

2.2 语法结构:jq对象.on(“事件类型”,“指定的后代元素”,事件处理函数);

在这里插入图片描述

总结: 如果是普通绑定事件你就可以使用on的普通事件绑定,如果是对于动态添加的元素的事件绑定就使用on的事件委派。

  • 4
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值