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 相关文章推荐
Mootools 1.2教程 Fx.Tween的使用
Sep 15 Javascript
JQuery Highcharts 动态生成图表的方法
Nov 15 Javascript
给应用部分的js代码设定一个统一的入口
Jun 15 Javascript
jQuery实用函数用法总结
Aug 29 Javascript
JavaScript实现强制重定向至HTTPS页面
Jun 10 Javascript
详细介绍jQuery.outerWidth() 函数具体用法
Jul 20 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
Mar 08 Javascript
微信小程序中hidden不生效原因的解决办法
Apr 26 Javascript
默认浏览器设置及vue自动打开页面的方法
Sep 21 Javascript
什么时候不能在 Node.js 中使用 Lock Files
Jun 24 Javascript
JS实现分页导航效果
Feb 19 Javascript
js实现手表表盘时钟与圆周运动
Sep 18 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的FTP学习(二)[转自奥索]
2006/10/09 PHP
PHP 多维数组排序实现代码
2009/08/05 PHP
php实现的遍历文件夹下所有文件,编辑删除
2010/01/05 PHP
如何设置mysql允许外网访问
2013/06/04 PHP
php防注入,表单提交值转义的实现详解
2013/06/10 PHP
PHP图片处理之使用imagecopyresampled函数裁剪图片例子
2014/11/19 PHP
PHP中常见的缓存技术实例分析
2015/09/23 PHP
PHP简单遍历对象示例
2016/09/28 PHP
thinkphp5实现无限级分类
2019/02/18 PHP
TinyMCE汉化及本地上传图片功能实例详解
2016/05/31 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
2016/11/02 Javascript
微信小程序 支付功能实现PHP实例详解
2017/05/12 Javascript
Vue中this.$router.push参数获取方法
2018/02/27 Javascript
代码详解javascript模块加载器
2018/03/04 Javascript
vue 组件高级用法实例详解
2018/04/11 Javascript
js实现继承的方法及优缺点总结
2019/05/08 Javascript
js实现简单扫雷
2020/11/27 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
2020/09/14 Javascript
[00:20]DOTA2荣耀之路7:-ah fu-抢盾
2018/05/31 DOTA
Python性能优化的20条建议
2014/10/25 Python
通过C++学习Python
2015/01/20 Python
在Python的Flask框架中验证注册用户的Email的方法
2015/09/02 Python
Python生成8位随机字符串的方法分析
2017/12/05 Python
python3爬虫之设计签名小程序
2018/06/19 Python
详解pandas安装若干异常及解决方案总结
2019/01/10 Python
django-crontab 定时执行任务方法的实现
2019/09/06 Python
Python中zipfile压缩文件模块的基本使用教程
2020/06/14 Python
pytorch Dataset,DataLoader产生自定义的训练数据案例
2021/03/03 Python
Hotels.com爱尔兰:全球酒店预订
2017/02/24 全球购物
妇产科护士自我鉴定
2013/10/15 职场文书
应聘教师推荐信
2013/10/31 职场文书
企业文明单位申报材料
2014/05/16 职场文书
项目建议书
2015/02/04 职场文书
户外拓展训练感想
2015/08/07 职场文书
筑梦中国心得体会
2016/01/18 职场文书
MySql数据库 查询时间序列间隔
2022/05/11 MySQL