jqueryon()方法绑定多个选择器,多个事件

xiaoxiao2021-03-01  18

本文转载自https://www.cnblogs.com/superfeeling/p/5775463.html 

还有  https://www.jquery123.com/on/  

 

.on()


所属分类:事件 > 绑定事件处理器英文文档:.on()

.on( events [, selector ] [, data ], handler(eventObject) )返回: jQuery

描述: 在选定的元素上绑定一个或多个事件处理函数。

添加的版本: 1.7.on( events [, selector ] [, data ], handler(eventObject) )

events

类型: String

一个或多个空格分隔的事件类型和可选的命名空间,或仅仅是命名空间,比如"click", "keydown.myPlugin", 或者 ".myPlugin"。

selector

类型: String

一个选择器字符串,用于过滤出被选中的元素中能触发事件的后代元素。如果选择器是 null 或者忽略了该选择器,那么被选中的元素总是能触发事件。

data

类型: Anything

当一个事件被触发时,要传递给事件处理函数的event.data。

handler(eventObject)

类型: Function()

事件被触发时,执行的函数。若该函数只是要执行return false的话,那么该参数位置可以直接简写成 false。

添加的版本: 1.7.on( events [, selector ] [, data ] )

events

类型: PlainObject

一个对象,键是由一个或多个由空格分隔的事件类型及可选的名字空间,值是这些事件类型所对应的事件处理函数。

selector

类型: String

一个选择器字符串,用于过滤出被选中的元素中能触发事件的后代元素。如果选择器是 null 或者忽略了该选择器,那么被选中的元素总是能触发事件。

data

类型: Anything

当一个事件被触发时,要传递给事件处理函数的event.data。

.on()方法事件处理程序到当前选定的jQuery对象中的元素。在jQuery 1.7中,.on()方法 提供绑定事件处理的所有功能。为了帮助从旧的jQuery事件方法转换过来,查看 .bind(), .delegate(), 和 .live(). 要删除的.on()绑定的事件,请参阅.off()。要绑定一个事件,并且只运行一次,然后删除自己, 请参阅.one()

 

这样一个需求,如果用live()方法实现的话 非常简单,容易理解。

$('nav li, #sb-nav li, #help li').live('click', function () { // code... });

jquery在1.7版本后,建议大家用on方法代替之前的bind、live、delegate方法。 那上面一句如果用on的话,怎么写呢?

其实查看live源码就知道,live实际是委托doucment进行事件委派的。

按照这个思路,可以将on方法绑定到document即可。

$(document).on('click', '#header .fixed-feedback-bn, #sb-sec .feedback-bn', function () { // code... });

还有一种情况,on()方法绑定多个事件,可以这样写:

$("table.planning_grid").on({ mouseenter: function() { // Handle mouseenter... }, mouseleave: function() { // Handle mouseleave... }, click: function() { // Handle click... } }, "td");

最后,用on()方法绑定多个选择器,多个事件则可以这样写:

$(document).on({ mouseenter: function() { // Handle mouseenter... }, mouseleave: function() { // Handle mouseleave... }, click: function() { // Handle click... } }, '#header .fixed-feedback-bn, #sb-sec .feedback-bn');

 

on绑定的方法中不包含hover方法!

转载请注明原文地址: https://www.6miu.com/read-4050017.html

最新回复(0)