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


Posted in Javascript onFebruary 06, 2015

本文实例分析了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程序设计有所帮助。

Javascript 相关文章推荐
JS实现一键回顶功能示例代码
Oct 28 Javascript
jquery处理页面弹出层查询数据等待操作实例
Mar 25 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
Sep 01 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
Dec 12 Javascript
Vue监听数组变化源码解析
Mar 09 Javascript
JS自动生成动态HTML验证码页面
Jun 14 Javascript
Vue2 轮播图slide组件实例代码
May 31 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
Oct 25 Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
Feb 21 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
May 07 Javascript
layui.tree组件的使用以及搜索节点功能的实现
Sep 26 Javascript
原生JS实现天气预报
Jun 16 Javascript
JS实现文字向下滚动完整实例
Feb 06 #Javascript
jquery中filter方法用法实例分析
Feb 06 #Javascript
Jquery对select的增、删、改、查操作
Feb 06 #Javascript
JavaScript常用的弹出广告及背投广告实现方法
Feb 06 #Javascript
js实现图片从左往右渐变切换效果的方法
Feb 06 #Javascript
js实现多选项切换导航菜单的方法
Feb 06 #Javascript
javascript实现多级联动下拉菜单的方法
Feb 06 #Javascript
You might like
PHP读取文件并可支持远程文件的代码分享
2012/10/03 PHP
PHP解码unicode编码的中文字符代码分享
2014/08/13 PHP
php类常量用法实例分析
2015/07/09 PHP
Yii2语言国际化的配置教程
2018/08/19 PHP
IE与Firefox在JavaScript上的7个不同写法小结
2009/09/14 Javascript
js判断IE6/IE7/FF的代码[XMLHttpRequest]
2011/02/16 Javascript
JavaScript中清空数组的三种方法分享
2011/04/07 Javascript
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
2012/02/03 Javascript
Uglifyjs(JS代码优化工具)入门 安装使用
2020/04/13 Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
2013/01/16 Javascript
javascript 按键事件(兼容各浏览器)
2013/12/20 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
2015/05/13 Javascript
12个超实用的JQuery代码片段
2015/11/02 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
2015/11/30 Javascript
深入学习nodejs中的async模块的使用方法
2017/07/12 NodeJs
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
2017/09/14 Javascript
Vue v2.5 调整和更新不完全问题
2017/10/24 Javascript
python实现从字符串中找出字符1的位置以及个数的方法
2014/08/25 Python
Pyinstaller打包.py生成.exe的方法和报错总结
2019/04/02 Python
FFrpc python客户端lib使用解析
2019/08/24 Python
pycharm 设置项目的根目录教程
2020/02/12 Python
Python自动登录QQ的实现示例
2020/08/28 Python
Pycharm自动添加文件头注释和函数注释参数的方法
2020/10/23 Python
使用Python实现音频双通道分离
2020/12/25 Python
波兰快递服务:Globkurier.pl
2019/11/08 全球购物
采购员的工作职责
2013/12/26 职场文书
物理教学随笔感言
2014/02/22 职场文书
《可爱的动物》教学反思
2014/02/22 职场文书
诉讼代理人授权委托书
2014/04/08 职场文书
小学数学课后反思
2014/04/23 职场文书
工伤私了协议书范本
2014/11/24 职场文书
护理专业自荐信范文
2015/03/06 职场文书
工伤劳动仲裁代理词
2015/05/25 职场文书
幼儿园开学温馨提示
2015/07/15 职场文书
2016年国庆节新闻稿范文
2015/11/25 职场文书
导游词范文之颐和园/重庆/云台山
2019/09/10 职场文书