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 相关文章推荐
JSON 客户端和服务器端的格式转换
Aug 27 Javascript
复选框全选与全不选操作实现思路
Aug 18 Javascript
javascript实现可拖动变色并关闭层窗口实例
May 15 Javascript
JavaScript Array对象详解
Mar 01 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
Dec 26 Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
Feb 27 Javascript
JS完成画圆圈的小球
Mar 07 Javascript
关于vue单文件中引用路径的处理方法
Jan 08 Javascript
Angular-UI Bootstrap组件实现警报功能
Jul 16 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
Sep 26 Javascript
这应该是最详细的响应式系统讲解了
Jul 22 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
Aug 23 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
实战mysql导出中文乱码及phpmyadmin导入中文乱码的解决方法
2010/06/11 PHP
ThinkPHP整合百度Ueditor图文教程
2014/10/21 PHP
PHP 实现base64编码文件上传出现问题详解
2020/09/01 PHP
Avengerls vs Newbee BO3 第二场2.18
2021/03/10 DOTA
Google Map API更新实现用户自定义标注坐标
2009/07/29 Javascript
利用jQuery接受和处理xml数据的代码(.net)
2011/03/28 Javascript
js实现一个省市区三级联动选择框代码分享
2013/03/06 Javascript
解析javascript 实用函数的使用详解
2013/05/10 Javascript
jQuery对Select的操作大集合(收藏)
2013/12/28 Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
2017/07/13 Javascript
jQuery实现键盘回车搜索功能
2017/07/25 jQuery
jQuery基于cookie实现换肤功能实例
2017/10/14 jQuery
JS实现求5的阶乘示例
2019/01/21 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
2019/03/09 Javascript
详解vue中router-link标签所必备了解的属性
2019/04/15 Javascript
Python中的startswith和endswith函数使用实例
2014/08/25 Python
Python 备份程序代码实现
2017/03/06 Python
Python 使用PIL numpy 实现拼接图片的示例
2018/05/08 Python
python实发邮件实例详解
2019/11/11 Python
Python3加密解密库Crypto的RSA加解密和签名/验签实现方法实例
2020/02/11 Python
使用Python3 poplib模块删除服务器多天前的邮件实现代码
2020/04/24 Python
Python3实现英文字母转换哥特式字体实例代码
2020/09/01 Python
pandas 按日期范围筛选数据的实现
2021/02/20 Python
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
2016/12/22 HTML / CSS
Ralph Lauren拉夫·劳伦美国官网:带有浓郁美国气息的高品味时装品牌
2017/11/01 全球购物
Nike加拿大官网:Nike.com (CA)
2019/04/09 全球购物
拉飞逸官网:Lafayette 148 New York
2020/07/15 全球购物
教师绩效考核方案
2014/01/21 职场文书
无房证明范本
2014/09/17 职场文书
企业法人授权委托书范本
2014/09/23 职场文书
十八大标语口号
2014/10/09 职场文书
学校三八妇女节活动总结
2015/02/06 职场文书
作息时间调整通知
2015/04/22 职场文书
情感电台广播稿
2015/08/18 职场文书
解决Tkinter中button按钮未按却主动执行command函数的问题
2021/05/23 Python
Spring Data JPA的Audit功能审计数据库的变更
2021/06/26 Java/Android