jQuery on()方法示例及jquery on()方法的优点


Posted in Javascript onAugust 27, 2015

jQuery on()方法是官方推荐的绑定事件的一个方法。

$(selector).on(event,childSelector,data,function,map)

由此扩展开来的几个以前常见的方法有.

bind()

 $("p").bind("click",function(){

alert("The paragraph was clicked.");

});

$("p").on("click",function(){


alert("The paragraph was clicked.");

});

delegate()

$("#div1").on("click","p",function(){

$(this).css("background-color","pink");

});

$("#div2").delegate("p","click",function(){


$(this).css("background-color","pink");

});

live()

$("#div1").on("click",function(){


$(this).css("background-color","pink");

});

$("#div2").live("click",function(){


$(this).css("background-color","pink");

});

以上三种方法在jQuery1.8之后都不推荐使用,官方在1.9时已经取消使用live()方法了,所以建议都使用on()方法。

tip:如果你需要移除on()所绑定的方法,可以使用off()方法处理。

$(document).ready(function(){
$("p").on("click",function(){


$(this).css("background-color","pink");

});

$("button").click(function(){


$("p").off("click");

});
});

tip:如果你的事件只需要一次的操作,可以使用one()这个方法

$(document).ready(function(){
$("p").one("click",function(){


$(this).animate({fontSize:"+=6px"});

});
});

trigger()绑定

$(selector).trigger(event,eventObj,param1,param2,...)
$(document).ready(function(){
$("input").select(function(){


$("input").after(" Text marked!");

});

$("button").click(function(){


$("input").trigger("select");

});
});

多个事件绑定同一个函数

$(document).ready(function(){
 $("p").on("mouseover mouseout",function(){
  $("p").toggleClass("intro");
 });
});

多个事件绑定不同函数

$(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");} 
 });
});

绑定自定义事件

$(document).ready(function(){
 $("p").on("myOwnEvent", function(event, showName){
  $(this).text(showName + "! What a beautiful name!").show();
 });
 $("button").click(function(){
  $("p").trigger("myOwnEvent",["Anja"]);
 });
});

传递数据到函数

function handlerName(event) 
{
 alert(event.data.msg);
}
$(document).ready(function(){
 $("p").on("click", {msg: "You just clicked me!"}, handlerName)
});

适用于未创建的元素

$(document).ready(function(){
 $("div").on("click","p",function(){
  $(this).slideToggle();
 });
 $("button").click(function(){
  $("<p>This is a new paragraph.</p>").insertAfter("button");
 });
});

jQuery绑定事件的方法有几种,推荐使用.on()方法绑定,原因有两点:

1.on()方法可以绑定动态添加到页面元素的事件

比如动态添加到页面的DOM元素,用.on()方法绑定的事件不需要关心注册该事件的元素何时被添加进来,也不需要重复绑定。有的同学可能习惯于用.bind()、.live()或.delegate(),查看源码就会发现,它们实际上调用的都是.on()方法,并且.live()方法在jQuery1.9版本已经被移除。

bind:
function(
 types, data, fn ) {
  return this.on(
 types, null,
 data, fn );
},
live:
function(
 types, data, fn ) {
  jQuery(
this.context
 ).on( types, this.selector,
 data, fn );
  return this;
},
delegate:
function(
 selector, types, data, fn ) {
  return this.on(
 types, selector, data, fn );
}

移除.on()绑定的事件用.off()方法。

2.on()方法绑定事件可以提升效率

很多文章都提到了利用事件冒泡和代理来提升事件绑定的效率,大多都没列出具体的差别,所以为了求证,我做一个小测试。

假设页面添加了5000个li,用chrome开发者工具Profiles测试页面载入时间。

普通绑定(姑且这么称呼它)

$('li').click(function(){
  console.log(this)
});

绑定过程的执行时间

2013-08-13_190358

普通绑定相当于在5000li上面分别注册click事件,内存占用约4.2M,绑定时间约为72ms。

.on()绑定

$(document).on('click',
'li',
function(){
  console.log(this)
})

绑定过程的执行时间

2013-08-13_191010

.on()绑定利用事件代理,只在document上注册了一个click事件,内存占用约2.2M,绑定时间约为1ms。

以上就是本文的全部内容,希望对大家学习jquery on()方法有所帮助。

Javascript 相关文章推荐
关于jquery css的使用介绍
Apr 18 Javascript
js同比例缩放图片的小例子
Oct 30 Javascript
jquery ajax post提交数据乱码
Nov 05 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
Dec 29 Javascript
jquery实现简易的移动端验证表单
Nov 08 Javascript
AngularJS入门心得之directive和controller通信过程
Jan 25 Javascript
浅析JavaScript函数的调用模式
Aug 10 Javascript
Angular2 多级注入器详解及实例
Oct 30 Javascript
AngularJS实现网站换肤实例
Feb 19 Javascript
bootstrap table实现单击单元格可编辑功能
Mar 28 Javascript
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
微信小程序实现点击卡片 翻转效果
Sep 04 Javascript
js实现仿京东2级菜单效果(带延时功能)
Aug 27 #Javascript
jQuery UI设置固定日期选择特效代码分享
Aug 27 #Javascript
js实现的早期滑动门菜单效果代码
Aug 27 #Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
Aug 27 #Javascript
js实现向右横向滑出的二级菜单效果
Aug 27 #Javascript
jQuery实现输入框下拉列表树插件特效代码分享
Aug 27 #Javascript
javascript中html字符串转化为jquery dom对象的方法
Aug 27 #Javascript
You might like
IIS环境下快速安装、配置和调试PHP5.2.0
2006/12/17 PHP
php 将json格式数据转换成数组的方法
2018/08/21 PHP
TP5.0框架实现无限极回复功能的方法分析
2019/05/04 PHP
Thinkphp5框架实现图片、音频和视频文件的上传功能详解
2019/08/27 PHP
javascript 打印页面代码
2009/03/24 Javascript
javascript二维数组转置实例
2015/01/22 Javascript
JavaScript事件委托用法分析
2015/01/24 Javascript
JavaScript实现快速排序的方法
2015/07/31 Javascript
详解JavaScript的Date对象(制作简易钟表)
2020/04/07 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
2015/12/29 Javascript
详解JavaScript中的自定义事件编写
2016/05/10 Javascript
js仿淘宝评价评分功能
2017/02/28 Javascript
微信小程序开发之好友列表字母列表跳转对应位置
2017/09/26 Javascript
使用Vue组件实现一个简单弹窗效果
2018/04/23 Javascript
用Node编写RESTful API接口的示例代码
2018/07/04 Javascript
解决angularjs service中依赖注入$scope报错的问题
2018/10/02 Javascript
微信小程序实现批量倒计时功能
2020/11/01 Javascript
[01:11:21]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第三场 3月7日
2021/03/11 DOTA
python日志记录模块实例及改进
2017/02/12 Python
python对配置文件.ini进行增删改查操作的方法示例
2017/07/28 Python
解决Django的request.POST获取不到内容的问题
2018/05/28 Python
Win10下python3.5和python2.7环境变量配置教程
2018/09/18 Python
Python 实现加密过的PDF文件转WORD格式
2020/02/04 Python
Python接口测试get请求过程详解
2020/02/28 Python
Django ORM判断查询结果是否为空,判断django中的orm为空实例
2020/07/09 Python
美国领先的水果篮送货公司和新鲜水果供应商:The Fruit Company
2018/02/13 全球购物
HomeAway的巴西品牌:Alugue Temporada
2018/04/10 全球购物
应届生学校辅导员求职信
2013/11/07 职场文书
二年级体育教学反思
2014/01/15 职场文书
怎样写好创业计划书的内容
2014/02/06 职场文书
求职信模板标准格式范文
2014/02/23 职场文书
群众路线对照检查材料思想汇报怎么写
2014/09/18 职场文书
解除劳动合同协议书范本2014
2014/09/25 职场文书
2014年医院后勤工作总结
2014/12/06 职场文书
个人年终总结范文
2015/03/09 职场文书
Win10/Win11 任务栏替换成经典样式
2022/04/19 数码科技