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 相关文章推荐
window.ActiveXObject使用说明
Nov 08 Javascript
javaScript中push函数用法实例分析
Jun 08 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
Aug 27 Javascript
jQuery实现form表单元素序列化为json对象的方法
Dec 09 Javascript
JavaScript省市区三级联动菜单效果
Sep 21 Javascript
jQuery动态创建元素以及追加节点的实现方法
Oct 20 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
Dec 19 Javascript
vue 注册组件的使用详解
May 05 Javascript
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
Mar 29 Javascript
JS实现提示效果弹出及延迟隐藏的功能
Aug 26 Javascript
react native 仿微信聊天室实例代码
Sep 17 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
Jul 22 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
简单了解将WordPress中的工具栏移到底部的小技巧
2015/12/31 PHP
PHP中ltrim与rtrim去除左右空格及特殊字符实例
2016/01/07 PHP
php中str_pad()函数用法分析
2017/03/28 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
基于jQuery的消息提示插件之旅 DivAlert(三)
2010/04/01 Javascript
javascript 函数参数限制说明
2010/11/19 Javascript
基于Jquery的简单图片切换效果
2011/01/06 Javascript
javascript数组遍历for与for in区别详解
2014/12/04 Javascript
javascript中数组方法汇总
2015/07/07 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
2016/07/01 Javascript
捕获未处理的Promise错误方法
2017/10/13 Javascript
原生JS封装_new函数实现new关键字的功能
2018/08/12 Javascript
Vue中的Props(不可变状态)
2018/09/29 Javascript
jqGrid表格底部汇总、合计行footerrow处理
2019/08/21 Javascript
原生JavaScript之es6中Class的用法分析
2020/02/23 Javascript
vue实现虚拟列表功能的代码
2020/07/28 Javascript
Vue组件通信$attrs、$listeners实现原理解析
2020/09/03 Javascript
python基础入门详解(文件输入/输出 内建类型 字典操作使用方法)
2013/12/08 Python
10种检测Python程序运行时间、CPU和内存占用的方法
2015/04/01 Python
Python自动重试HTTP连接装饰器
2015/04/28 Python
深入浅析Python中list的复制及深拷贝与浅拷贝
2018/09/03 Python
selenium+python 对输入框的输入处理方法
2018/10/11 Python
在PyCharm中实现添加快捷模块
2020/02/12 Python
深入了解canvas在移动端绘制模糊的问题解决
2019/04/30 HTML / CSS
瑞典耳机品牌:URBANISTA
2019/12/03 全球购物
法律专业应届生自荐信范文
2014/01/06 职场文书
创业计划书的写作技巧及要点
2014/01/31 职场文书
晚会主持词开场白
2014/03/17 职场文书
小学生新年寄语
2014/04/03 职场文书
幼儿园大班评语大全
2014/04/17 职场文书
家长建议怎么写
2014/05/15 职场文书
实验室的标语
2014/06/20 职场文书
售房协议书
2014/08/19 职场文书
暑假学习心得体会
2014/09/02 职场文书
项目合作意向书
2015/05/08 职场文书
侵犯商业秘密的律师函
2015/05/27 职场文书