脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery中on()方法用法

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

 更新时间：2015年02月06日 15:34:07   作者：whazhl  
这篇文章主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能及各种常见的使用技巧,并对比分析了与bind(),live(),delegate()等方法的区别,需要的朋友可以参考下

本文实例分析了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(){
  $("div").on("click","p",function(){
    $(this).slideToggle();
  });
  $("button").click(function(){
    $("<p>This is a new paragraph.</p>").insertAfter("button");
  });
});

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

您可能感兴趣的文章:

相关文章

  • jQuery查找dom的几种方法效率详解

    jQuery查找dom的几种方法效率详解

    这篇文章主要记录了在近期开发中遇到的jQuery dom基本查找方法，然后将各种方法性能做了一个比较，目的是希望自己在以后dom元素查找时，使用最优的方案。文中介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-05-05
  • jQuery Autocomplete自动完成插件

    jQuery Autocomplete自动完成插件

    jQuery Autocomplete plugin 写的比较满意，拿出来分享，欢迎大家找BUG。
    2010-07-07
  • 浅谈EasyUI常用控件的禁用方法

    浅谈EasyUI常用控件的禁用方法

    下面小编就为大家带来一篇浅谈EasyUI常用控件的禁用方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • iframe中使用jquery进行查找的方法【案例分析】

    iframe中使用jquery进行查找的方法【案例分析】

    这篇文章主要介绍了iframe中使用jquery进行查找的方法,结合实际案例形式较为详细的分析了jQuery结合iframe查找的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • 关于jquery input textare 事件绑定及用法学习

    关于jquery input textare 事件绑定及用法学习

    目前1.7以上，jquery的事件绑定已经用on替换了原来的bind，接下来为大家介绍下bind的使用方法及input textare事件，感兴趣的朋友可以参考下哈
    2013-04-04
  • jQuery实现大屏滚动播放效果

    jQuery实现大屏滚动播放效果

    这篇文章主要为大家详细介绍了jQuery实现大屏滚动播放效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-06-06
  • jQuery的animate函数实现图文切换动画效果

    jQuery的animate函数实现图文切换动画效果

    animate()在jquery中作为一个方法,可用于创建动画效果，jquery中的animate()方法让那个页面增加了很好的视觉效果
    2015-05-05
  • jQuery 各种浏览器下获得日期区别

    jQuery 各种浏览器下获得日期区别

    在系统开发过程中经常会用到系统的当前时间，然而我们遇到的问题确又是各个浏览器返回值不同，就像典型的IE和FF浏览器。
    2008-12-12
  • jQuery 3.0中存在问题及解决办法

    jQuery 3.0中存在问题及解决办法

    这篇文章主要介绍了jQuery 3.0中存在问题及解决办法的相关资料,需要的朋友可以参考下
    2016-07-07
  • jQuery手风琴的简单制作

    jQuery手风琴的简单制作

    这篇文章主要为大家详细介绍了jQuery手风琴的简单制作，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-05-05

最新评论