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代码格式化和语法着色V2
Oct 14 Javascript
Jquery中给animation加更多的运作效果实例
Sep 05 Javascript
Javascript全局变量var与不var的区别深入解析
Dec 09 Javascript
JS中处理时间之setUTCMinutes()方法的使用
Jun 12 Javascript
jquery利用拖拽方式在图片上添加热链接
Nov 24 Javascript
JavaScript数组和对象的复制
Mar 21 Javascript
解决vue 按钮多次点击重复提交数据问题
May 10 Javascript
node中间层实现文件上传功能
Jun 11 Javascript
微信小程序WebSocket实现聊天对话功能
Jul 06 Javascript
layui点击按钮添加可编辑的一行方法
Aug 15 Javascript
使用webpack/gulp构建TypeScript项目的方法示例
Dec 18 Javascript
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
Sep 29 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
一个查看session内容的函数
2006/10/09 PHP
让PHP支持断点续传的源码
2010/05/16 PHP
php伪静态之APACHE篇
2014/06/02 PHP
将PHP程序中返回的JSON格式数据用gzip压缩输出的方法
2016/03/03 PHP
PHP使用反射机制实现查找类和方法的所在位置
2016/04/22 PHP
不同浏览器对回车提交表单的处理办法
2010/02/13 Javascript
Javascript 面向对象 继承
2010/05/13 Javascript
js 判断上传文件大小及格式代码
2013/11/13 Javascript
JavaScript数组去重的3种方法和代码实例
2015/07/01 Javascript
全面解析Bootstrap弹窗的实现方法
2015/12/01 Javascript
实例剖析AngularJS框架中数据的双向绑定运用
2016/03/04 Javascript
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
2016/06/20 Javascript
对js中回调函数的一些看法
2016/08/29 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
2017/07/15 Javascript
js实现日期显示的一些操作(实例讲解)
2017/07/27 Javascript
vue用addRoutes实现动态路由的示例
2017/09/15 Javascript
JavaScript 数组的进化与性能分析
2017/09/18 Javascript
元素全屏的设置与监听实例
2017/11/28 Javascript
chosen实现省市区三级联动
2018/08/16 Javascript
JavaScript事件冒泡机制原理实例解析
2020/01/14 Javascript
python学习必备知识汇总
2017/09/08 Python
python利用thrift服务读取hbase数据的方法
2018/12/27 Python
python爬取cnvd漏洞库信息的实例
2019/02/14 Python
pyqt5 实现工具栏文字图片同时显示
2019/06/13 Python
Python Socketserver实现FTP文件上传下载代码实例
2020/03/27 Python
使用PyQt5实现图片查看器的示例代码
2020/04/21 Python
Python命令行参数定义及需要注意的地方
2020/11/30 Python
CSS3 毛玻璃效果
2019/08/14 HTML / CSS
突袭HTML5之Javascript API扩展3—本地存储全新体验
2013/01/31 HTML / CSS
计算机专业自荐信范文
2014/05/28 职场文书
学校领导班子群众路线整改措施
2014/09/16 职场文书
学生抄袭作业的检讨书
2014/10/02 职场文书
学生个人评语大全
2015/01/04 职场文书
委托书格式要求
2015/01/28 职场文书
幼儿园大班教师个人工作总结
2015/02/05 职场文书
《弟子规》读后感:知廉耻、明是非、懂荣辱、辨善恶
2019/12/03 职场文书