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实现带节日和农历的日历特效
Feb 01 Javascript
jquery 中ajax执行的优先级
Jun 22 Javascript
javascript中caller和callee详解
Aug 10 Javascript
分享jQuery封装好的一些常用操作
Jul 28 Javascript
深入理解AngularJS中的ng-bind-html指令
Mar 27 Javascript
详解@angular/cli 改变默认启动端口两种方式
Nov 29 Javascript
详解Next.js页面渲染的优化方案
Jan 27 Javascript
基于JS开发微信网页录音功能的实例代码
Apr 30 Javascript
ES6基础之字符串和函数的拓展详解
Aug 22 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
Apr 26 Javascript
JavaScript变量Dom对象的所有属性
Apr 30 Javascript
Vue循环中多个input绑定指定v-model实例
Aug 31 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
Classes and Objects in PHP5-面向对象编程 [1]
2006/10/09 PHP
php 获取百度的热词数据的代码
2012/02/18 PHP
推荐几个开源的微信开发项目
2014/12/28 PHP
PHP使用FFmpeg获取视频播放总时长与码率等信息
2016/09/13 PHP
PHP封装的多文件上传类实例与用法详解
2017/02/07 PHP
阿里对象存储OSS在laravel框架中的使用方法
2019/10/13 PHP
phpcmsv9.0任意文件上传漏洞解析
2020/10/20 PHP
javascript 操作Word和Excel的实现代码
2009/10/26 Javascript
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
2010/06/02 Javascript
node.js中的http.response.addTrailers方法使用说明
2014/12/14 Javascript
Node.js中的process.nextTick使用实例
2015/06/25 Javascript
jQuery实现图片轮播特效代码分享
2015/09/15 Javascript
JavaScript如何获取数组最大值和最小值
2015/11/18 Javascript
学习使用AngularJS文件上传控件
2016/02/16 Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
2016/02/19 Javascript
JS DOMReady事件的六种实现方法总结
2016/11/23 Javascript
深入理解vue.js双向绑定的实现原理
2016/12/05 Javascript
基于Vue如何封装分页组件
2016/12/16 Javascript
ES6 Generator函数的应用实例分析
2019/06/26 Javascript
js实现限定范围拖拽的示例
2020/10/26 Javascript
Python中使用urllib2防止302跳转的代码例子
2014/07/07 Python
python使用正则表达式替换匹配成功的组并输出替换的次数
2017/11/22 Python
python爬虫面试宝典(常见问题)
2018/03/02 Python
python如何拆分含有多种分隔符的字符串
2018/03/20 Python
python输入多行字符串的方法总结
2019/07/02 Python
美国在线健康和美容市场:Pharmapacks
2018/12/05 全球购物
贝斯特韦斯特酒店集团官网:Best Western
2019/01/03 全球购物
中国汽车租赁行业头部企业:一嗨租车
2019/05/16 全球购物
美国儿童珠宝在线零售商:Loveivy
2019/05/22 全球购物
质量工程师岗位职责
2013/11/16 职场文书
《火烧云》教学反思
2014/04/12 职场文书
信息员培训方案
2014/06/12 职场文书
2014最新开业庆典策划方案(5篇)
2014/09/15 职场文书
寻衅滋事罪辩护词
2015/05/21 职场文书
《最终幻想14》6.01版本4月5日推出 追加新任务新道具
2022/04/03 其他游戏
python区块链持久化和命令行接口实现简版
2022/05/25 Python