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 相关文章推荐
javascript json2 使用方法
Mar 16 Javascript
JS图片根据鼠标滚动延时加载的实例代码
Jul 13 Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
Aug 13 Javascript
js用正则表达式来验证表单(比较齐全的资源)
Nov 17 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
May 20 Javascript
js触发select onchange事件的小技巧
Aug 05 Javascript
Vue.js开发环境搭建
Nov 10 Javascript
js oncontextmenu事件使用详解
Mar 25 Javascript
angular使用post、get向后台传参的问题实例
May 27 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
Apr 16 Javascript
es6函数之严格模式用法实例分析
Mar 17 Javascript
js实现网页随机验证码
Oct 19 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
php 二维数组时间排序实现代码
2016/11/19 PHP
PHP图片裁剪与缩放示例(无损裁剪图片)
2017/02/08 PHP
PHP+jQuery实现即点即改功能示例
2019/02/21 PHP
Laravel 类和接口注入相关的代码
2019/10/15 PHP
基于JQuery实现鼠标点击文本框显示隐藏提示文本
2012/02/23 Javascript
javascript利用apply和arguments复用方法
2013/11/25 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
2014/09/10 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
2014/10/17 Javascript
jQuery操作属性和样式详解
2016/04/13 Javascript
Javascript小技能总结(推荐)
2016/06/02 Javascript
jQuery实现发送验证码并60秒倒计时功能
2016/11/25 Javascript
URL中“#” “?” &amp;“”号的作用浅析
2017/02/04 Javascript
jQuery 控制文本框自动缩小字体填充
2017/06/16 jQuery
基于angular2 的 http服务封装的实例代码
2017/06/29 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
2020/02/03 Javascript
有趣的JavaScript隐式类型转换操作实例分析
2020/05/02 Javascript
[52:12]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
python中日期和时间格式化输出的方法小结
2015/03/19 Python
Golang与python线程详解及简单实例
2017/04/27 Python
Python分治法定义与应用实例详解
2017/07/28 Python
Python3实现发送QQ邮件功能(文本)
2017/12/15 Python
Python实现多线程的两种方式分析
2018/08/29 Python
对python打乱数据集中X,y标签对的方法详解
2018/12/14 Python
Flask配置Cors跨域的实现
2019/07/12 Python
100行Python代码实现每天不同时间段定时给女友发消息
2019/09/27 Python
pytorch进行上采样的种类实例
2020/02/18 Python
HTML5 Canvas绘制圆点虚线实例
2015/01/01 HTML / CSS
canvas 下载二维码和图片加水印的方法
2018/03/21 HTML / CSS
AmazeUI 输入框组的示例代码
2020/08/14 HTML / CSS
PHP面试题及答案一
2012/06/18 面试题
安全资料员岗位职责
2013/12/14 职场文书
个人求职简历中英文自我评价
2013/12/16 职场文书
化学实验员岗位职责
2013/12/28 职场文书
最新的互联网创业计划书
2014/01/10 职场文书
国家助学金获奖感言
2014/01/31 职场文书
MySQL中的引号和反引号的区别与用法详解
2021/10/24 MySQL