相信大家都知道在jQuery1.9
版本中,已经去掉了live
和delegate
方法,从而将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
});
注意: 使用jQuery
中on
进行普通绑定事件的时候,会出现一些小小问题,就是不能给动态添加的元素绑定事件,
这时候就要用到on
的事件委派(事件委托),接下来我们继续看看on
对于事件委托的处理
二、 使用on
进行事件委派
2.1 标准浏览器中都有事件冒泡(bubble
)或捕获(propagate
)机制
如图:
当目标元素被触发时,先从它祖先元素一层一层将事件传达给目标函数,如上图中P
的父元素 div
依次传递给target
,此为事件捕获;
–当目标函数被触发后,又将事件一层一层传递到根节点,即老祖宗,此为事件冒泡。所有浏览器都有事件冒泡机制。所以,我们可以利用这一特性,优化代码,减少事件绑定。
on
方法也利用了这一特性。当‘selector
’被提供时,就是事件委托,事件触发时,直接绑定在on
方法上的元素是不会触发该事件,而它指定的后代元素‘selector
’就会利用冒泡机制,到直接绑定在on
方法上的元素,给予处理。
2.2 语法结构:jq对象.on(“事件类型”,“指定的后代元素”,事件处理函数);
总结: 如果是普通绑定事件你就可以使用on
的普通事件绑定,如果是对于动态添加的元素的事件绑定就使用on
的事件委派。