jQuery中on()方法用法实例详解

本文实例分析了jQuery on()方法的用法。分享给大家供大家参考。具体分析如下：

@H_502_3@一、jQuery on()方法的使用： on(events,[selector],[data],fn)

events:一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin" 。
selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择器为null或省略，当它到达选定的元素，事件总是触发。
data:当一个事件被触发时要传递event.data给事件处理函数。
fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。

@H_502_3@二、jQuery on()方法的优点： 1、提供了一种统一绑定事件的方法

2、仍然提供了.delegate()的优点，当然如果需要你也可以直接用.bind()

@H_502_3@三、与.bind(),.live(),.delegate()的比较： 1、其实.bind(),.delegate()都是通过.on()来实现的

代码如下:

live: function( types,fn ) { jQuery( this.context ).on( types,this.selector,fn ); return this; }, die: function( types,fn ) { jQuery( this.context ).off( types,this.selector || "**",

delegate: function( selector,types,selector, undelegate: function( selector,fn ) { // ( namespace ) or ( selector,types [,fn] ) return arguments.length === 1 ? this.off( selector,"**" ) : this.off( types,selector || "**",fn ); }

2、用.bind()的代价是非常大的，它会把相同的一个事件处理程序hook到所有匹配的DOM元素上

3、不要再用.live()了，它已经不再被推荐了，而且还有许多问题

4、.delegate()会提供很好的方法来提高效率，同时我们可以添加一事件处理方法到动态添加的元素上。

5、我们可以用.on()来代替上述的3种方法

@H_502_3@四、jQuery on()方法的使用示例

1、绑定click事件，使用off()方法移除on()所绑定的方法

代码如下:

2、多个事件绑定同一个函数

代码如下:

SEOver mouSEOut",function(){ $("p").toggleClass("intro"); }); });

3、多个事件绑定不同函数

代码如下:

SEOver:function(){$("body").css("background-color","lightgray");}, mouSEOut:function(){$("body").css("background-color","lightblue");}, click:function(){$("body").css("background-color","yellow");} }); });

4、绑定自定义事件

代码如下:

5、传递数据到函数

代码如下:

$(document).ready(function(){ $("p").on("click",{msg: "You just clicked me!"},handlerName) });

6、适用于未创建的元素

代码如下:

This is a new paragraph.

").insertAfter("button"); }); });

希望本文所述对大家的jQuery程序设计有所帮助。

原文链接：https://www.f2er.com/jquery/55849.html

jQuery on()方法方法方法用法用法

上一篇：jquery中filter方法用法实例分析下一篇：JQuery中serialize()用法实例分析

jQuery中on()方法用法实例详解

猜你在找的jQuery相关文章