脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-jQuery中on()方法用法实例教程详解，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。
本文实例分析了jQuery on()方法的用法。分享给大家供大家参考。具体分析如下：
一、jquery on()方法的使用：
on(events,[selector],[data],fn)
events:一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin" 。
selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择器为null或省略，当它到达选定的元素，事件总是触发。
data:当一个事件被触发时要传递event.data给事件处理函数。
fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。
二、jQuery on()方法的优点：
1、提供了一种统一绑定事件的方法
2、仍然提供了.delegate()的优点，当然如果需要你也可以直接用.bind()
三、与.bind(), .live(), .delegate()的比较：
1、其实.bind(), .live(), .delegate()都是通过.on()来实现的
代码如下:
bind: function( tyPEs, data, fn ) {
return this.on( types, null, data, fn );
},
unbind: function( types, fn ) {
return this.off( types, null, fn );
},
live: function( types, data, fn ) {
jQuery( this.context ).on( types, this.selector, data, fn );
return this;
},
die: function( types, fn ) {
jQuery( this.context ).off( types, this.selector || "**", fn );
return this;
},
delegate: function( selector, types, data, fn ) {
return this.on( types, selector, data, fn );
},
undelegate: function( selector, types, 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种方法
四、jQuery on()方法的使用示例
1、绑定click事件，使用Off()方法移除on()所绑定的方法
代码如下:
$(document).ready(function(){
$("p").on("click",function(){
$(this).css("background-color","pink");
});
$("button").click(function(){
$("p").off("click");
});
});
2、多个事件绑定同一个函数
代码如下:
$(document).ready(function(){
$("p").on(";mouseover mouseout",function(){
$("p").toggleClass("intro");
});
});
3、多个事件绑定不同函数
代码如下:
$(document).ready(function(){
$("p").on({
mouseover:function(){$("body").css("background-color","lightgray");},
mouseout:function(){$("body").css("background-color","lightblue");},
click:function(){$("body").css("background-color","yellow");}
});
});
4、绑定自定义事件
代码如下:
$(document).ready(function(){
$("p").on("myOwnEvent", function(event, showName){
$(this).text(showName + "! What a beautiful name!").show();
});
$("button").click(function(){
$("p").trigger("myOwnEvent",["Anja"]);
});
});
5、传递数据到函数
代码如下:
function handlerName(event)
{
alert(event.data.msg);
}
$(document).ready(function(){
$("p").on("click", {msg: "You just clicked me!"}, handlerName)
});
6、适用于未创建的元素
代码如下:
$(document).ready(function(){
$("p").on("click","p",function(){
$(this).slideToggle();
});
$("button").click(function(){
$("<p>This is a new paragraph.</p>").insertAfter("button");
});
});
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-jQuery中on()方法用法实例教程详解全部内容，希望文章能够帮你解决javascript代码实例教程-jQuery中on()方法用法实例教程详解所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。