jQuery 事件 方法
jQuery 事件方法详解
简介
jQuery 是一个功能强大的JavaScript 库,具有良好的跨浏览器支持和简化HTML文档遍历和操作DOM的功能。事件是jQuery的一大特色,jQuery 事件提供了一系列事件方法,使开发者更方便地处理JavaScript事件。本文主要介绍 jQuery 事件方法。
jQuery 事件方法
以下是 jQuery 事件方法列表:
方法 | 描述 |
---|---|
bind() | 为被选元素添加一个或多个事件处理程序 |
unbind() | 从被选元素中删除绑定的事件处理程序 |
on() | 为被选元素的一个或多个事件绑定事件处理函数 |
off() | 从被选元素中移除事件处理函数 |
delegate() | 指定了一个事件处理程序,以便绑定到匹配的元素集中的每个元素,包括新添加的元素 |
undelegate() | 卸载先前使用.delegate()绑定的事件 |
hover() | 鼠标经过和鼠标离开事件处理函数的快捷方式 |
trigger() | 为被选元素触发指定的事件 |
bind()
该方法能够为被选元素添加一个或多个事件处理程序,绑定了事件后可以在事件触发时执行相应的回调函数。bind()方法可以为常见的事件,如click、focus、blur等添加处理函数。该方法实现需要两个参数,一个是事件类型,另一个是事件处理程序函数。例如:
$("button").bind("click", function(){ /* ... */});
在这个例子中,当按钮被点击时,回调函数将被调用。需要注意的是,bind()方法绑定的事件处理程序只会对现有的元素生效。如果要绑定的元素是后来添加的,需要使用.on()方法。另外,该方法可以用.off()方法来删除事件处理程序。
on()
on()方法与bind()方法的实现方式类似,不同之处在于.on()方法可以为以后创建的属于被选元素的子元素绑定事件,而bind()方法只对已经在文档中存在的元素有效。该方法的语法如下:
$(selector).on(event,childSelector,data,function)
其中,selector表示被选元素,event为绑定的事件类型,childSelector为子元素的选择器,data是可选参数,表示传递给事件处理程序的额外数据,function是所要执行的函数。例如:
$("table").on("click","tr",function(event){
$(this).toggleClass("highlight");
});
在这个例子中,当选中表格中的行或单元格时,toggleClass(“highlight”)方法将对选中的单元格进行高亮显示。需要注意的是,on()方法绑定的事件处理程序会对子元素进行事件委托。而且.on()方法可以使用.off()方法来删除事件处理程序。
unbind()
unbind()方法从元素中删除先前绑定的事件处理程序,该方法的语法如下:
$("p").unbind();
在这个例子中,unbind()方法删除了所有的事件处理程序。需要注意的是,unbind()方法不仅会删除由bind()、live()和delegate()方法绑定的事件处理程序,而且还会删除通过属性addEventListener()方法或其他常规方法绑定的事件处理程序。
off()
.off()方法用于移除事件处理函数,该方法与.unbind()方法具有相同的功能。.off()方法可以通过两种方式使用。首先,如果没有参数,则将删除所有事件处理程序,例如:
$("p").off();
其次,可以使用两个参数的形式,第1个参数是事件类型,第2个参数是函数,例如:
$("p").off("click", function(){ /* ... */});
需要注意的是,如果只提供了第1个参数,则.off()方法将删除所有的具有该事件类型的事件处理程序。
delegate()
delegate()方法是为匹配的元素绑定一个或多个事件处理程序,而这些元素的子元素即使是以后添加的,也会执行相应的处理程序。该方法的语法如下:
$(selector).delegate(childSelector,event,data,function)
其中,selector 表示被选元素,childSelector 表示匹配子元素的选择器,event 是为其绑定事件处理程序的事件类型,data 是可选的,function 是所要执行的函数。例如:
$("table").delegate("td", "mouseover mouseleave", function(event){
if ( event.type == "mouseover" ) {
$(this).parent().addClass("hover");
} else {
$(this).parent().removeClass("hover");
}
});
在这个例子中,delegate()方法为td元素添加mouseover和mouseleave事件处理程序。需要注意的是,delegate()方法不是所有元素都能使用的,只适用于能够冒泡的事件(例如,click事件)。
undelegate()
undelegate()方法是解除使用delegate()方法绑定的事件处理程序,该方法可以使用两种方式。第1种方式使用方法如下:
$(selector).undelegate();
在这个例子中,undelegate()方法会清除所有的delegate()法绑定的事件处理程序。第2种用法:
$(selector).undelegate(event,selector,function)
其中,event表示为其解除绑定的事件类型,selector 表示为其解除绑定的子元素选择器,而function 表示为其解除绑定的处理程序函数。例如:
$("#dataTable tbody").undelegate("tr", "click", function(){ /* ... */});
hover()
hover()方法是鼠标经过和移出事件处理程序的便捷方法。hover()方法需要两个参数,第1个参数是当鼠标位于元素上时要发生的函数,第2个参数是当鼠标从元素上移开时要发生的函数。例如:
$("td").hover(function(){
$(this).addClass("hover");
}, function(){
$(this).removeClass("hover");
});
在这个例子中,鼠标经过单元格时,会添加highlight类,移出单元格时会删除该类。需要注意的是,hover()方法不支持事件委托。
结论
本文详细介绍了 jQuery 事件方法。这些方法可广泛应用于开发交互性强的Web应用程序,同时用于处理各种用户交互事件触发的操作。要熟练掌握这些方法,需要大量的实践和尝试。让我们利用这些方法,开发出丰富多彩的 jQuery 应用。