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 相关文章推荐
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
Jul 19 Javascript
jquery属性过滤选择器使用示例
Jun 18 Javascript
javascript获取元素离文档各边距离的方法
Feb 13 Javascript
js+HTML5实现canvas多种颜色渐变效果的方法
Jun 05 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
Nov 09 Javascript
window.onerror()的用法与实例分析
Jan 27 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
Jun 06 Javascript
使用Ajax与服务器(JSON)通信实例
Nov 04 Javascript
JS的Ajax与后端交互数据的实例
Aug 08 Javascript
JS实现根据详细地址获取经纬度功能示例
Apr 16 Javascript
javascript 原型与原型链的理解及应用实例分析
Feb 10 Javascript
关于JS中的作用域中的问题思考分享
Apr 06 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学习 函数 课件
2008/06/15 PHP
PHP6 先修班 JSON实例代码
2008/08/23 PHP
php开启安全模式后禁用的函数集合
2011/06/26 PHP
关于PHP session 存储方式的详细介绍
2013/06/25 PHP
php实现RSA加密类实例
2015/03/26 PHP
php实现格式化多行文本为Js可用格式
2015/04/15 PHP
Laravel统计一段时间间隔的数据方法
2019/10/09 PHP
PHP反射基础知识回顾
2020/09/10 PHP
Jquery拖拽并简单保存的实现代码
2010/11/28 Javascript
基于jquery的滚动条滚动固定div(附演示下载)
2012/10/29 Javascript
wap浏览自动跳转到wap页面的js代码
2014/05/17 Javascript
在JavaScript中判断整型的N种方法示例介绍
2014/06/18 Javascript
浅谈javascript获取元素transform参数
2015/07/24 Javascript
node.js下LDAP查询实例分享
2015/09/30 Javascript
javascript设计模式--策略模式之输入验证
2015/11/27 Javascript
JavaScript 拖拽实例代码
2016/09/21 Javascript
jQuery 的 ready()的纯js替代方法
2016/11/20 Javascript
JavaScript基本语法_动力节点Java学院整理
2017/06/26 Javascript
vue-router传递参数的几种方式实例详解
2018/11/13 Javascript
JS使用数组实现的队列功能示例
2019/03/04 Javascript
解析Python中的异常处理
2015/04/28 Python
详解Python中使用base64模块来处理base64编码的方法
2016/07/01 Python
windows系统中Python多版本与jupyter notebook使用虚拟环境的过程
2019/05/15 Python
Tensorflow进行多维矩阵的拆分与拼接实例
2020/02/07 Python
Python matplotlib读取excel数据并用for循环画多个子图subplot操作
2020/07/14 Python
荷兰的时尚市场:To Be Dressed
2019/05/06 全球购物
翻译专业应届生求职信
2013/11/23 职场文书
小学校园文化建设汇报材料
2014/08/19 职场文书
党的群众路线教育实践活动个人整改落实情况汇报
2014/10/28 职场文书
护理医院见习报告
2014/11/03 职场文书
幼儿园小班班务总结
2015/08/03 职场文书
《认识钟表》教学反思
2016/02/16 职场文书
2019年最新证婚词精选集!
2019/06/28 职场文书
三好学生竞选稿范文
2019/08/21 职场文书
PHP中strval()函数实例用法
2021/06/07 PHP
详解Vue slot插槽
2021/11/20 Vue.js