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 相关文章推荐
javascript HTMLEncode HTMLDecode的完整实例(兼容ie和火狐)
Jun 02 Javascript
javascript最常用与实用的创建类的代码
Aug 12 Javascript
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
Jul 17 Javascript
jquery解决图片路径不存在执行替换路径
Feb 06 Javascript
jQuery函数map()和each()介绍及异同点分析
Nov 08 Javascript
ECMAScript6函数默认参数
Jun 12 Javascript
js获取对象、数组的实际长度,元素实际个数的实现代码
Jun 08 Javascript
json对象转为字符串,当做参数传递时加密解密的实现方法
Jun 29 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
May 03 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
Sep 24 Javascript
vue自定义标签和单页面多路由的实现代码
May 03 Javascript
vue-socket.io接收不到数据问题的解决方法
May 13 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
实时抓取YAHOO股票报价的代码
2006/10/09 PHP
一个用于网络的工具函数库
2006/10/09 PHP
PHP与SQL注入攻击[一]
2007/04/17 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
laravel validate 设置为中文的例子(验证提示为中文)
2019/09/29 PHP
onpropertypchange
2006/07/01 Javascript
CSDN轮换广告图片轮换效果
2007/03/27 Javascript
网上应用的一个不错common.js脚本
2007/08/08 Javascript
javascript 循环读取JSON数据的代码
2010/07/17 Javascript
JSON+JavaScript处理JSON的简单例子
2013/03/20 Javascript
js动态拼接正则表达式的两种方法
2014/03/04 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
2015/03/24 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
2016/08/26 Javascript
BootStrap tab选项卡使用小结
2020/08/09 Javascript
概述BootStrap中role=&quot;form&quot;及role作用角色
2016/12/08 Javascript
微信小程序开发探究
2016/12/27 Javascript
Node.js之网络通讯模块实现浅析
2017/04/01 Javascript
Jquery获取radio选中的值
2017/05/05 jQuery
layui弹出框Tab选项卡的示例代码
2019/09/04 Javascript
基于javascript原生判断DOM是否加载完毕
2020/10/14 Javascript
Python中collections模块的基本使用教程
2018/12/07 Python
Python按钮的响应事件详解
2019/03/04 Python
Python 装饰器@,对函数进行功能扩展操作示例【开闭原则】
2019/10/17 Python
python实现XML解析的方法解析
2019/11/16 Python
HTML5梦幻之旅——炫丽的流星雨效果实现过程
2013/08/06 HTML / CSS
海淘母婴商城:国际妈咪
2016/07/23 全球购物
彪马美国官网:PUMA美国
2017/03/09 全球购物
旅游管理毕业生自荐信范文
2014/03/19 职场文书
房屋买卖授权委托书
2014/09/27 职场文书
学习保证书怎么写
2015/02/26 职场文书
销售员自我评价
2015/03/11 职场文书
刮痧观后感
2015/06/05 职场文书
2016会计专业自荐信范文
2016/01/28 职场文书
Python+Appium新手教程
2021/04/17 Python
用Python监控你的朋友都在浏览哪些网站?
2021/05/27 Python
Java并发编程之原子性-Atomic的使用
2022/03/16 Java/Android