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 相关文章推荐
DIY jquery plugin - tabs标签切换实现代码
Dec 11 Javascript
js正则匹配出所有图片及图片地址src的方法
Jun 08 Javascript
基于jquery实现动态竖向柱状条特效
Feb 12 Javascript
实用jquery操作表单元素的简单代码
Jul 04 Javascript
Javascript 普通函数和构造函数的区别
Nov 05 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
Nov 05 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
Nov 24 Javascript
js实现图片粘贴上传到服务器并展示的实例
Nov 08 Javascript
layui添加动态菜单与选项卡
Jul 26 Javascript
layui使用label标签的方法
Sep 14 Javascript
Layui表格监听行单双击事件讲解
Nov 14 Javascript
Vue开发环境跨域访问问题
Jan 22 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 strtotime 函数UNIX时间戳
2009/01/14 PHP
php中smarty区域循环的方法
2015/06/11 PHP
理解PHP中的Session及对Session有效期的控制
2016/01/08 PHP
PHP根据session与cookie用户登录状态操作类的代码
2016/05/13 PHP
php usort 使用用户自定义的比较函数对二维数组中的值进行排序
2017/05/02 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
PHP-FPM 的管理和配置详解
2019/02/17 PHP
JavaScript null和undefined区别分析
2009/10/14 Javascript
jquery实现商品拖动选择效果代码(自写)
2013/05/28 Javascript
JS下拉缓冲菜单示例代码
2013/08/30 Javascript
document.documentElement和document.body区别介绍
2013/09/16 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
2014/04/29 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
2016/08/25 Javascript
老生常谈javascript变量的命名规范和注释
2016/09/29 Javascript
一个极为简单的requirejs实现方法
2016/10/20 Javascript
EasyUI学习之Combobox级联下拉列表(2)
2016/12/29 Javascript
jqueryUI tab标签页代码分享
2017/10/09 jQuery
Vue实现点击箭头上下移动效果
2020/06/11 Javascript
react的hooks的用法详解
2020/10/12 Javascript
python使用fileinput模块实现逐行读取文件的方法
2015/04/29 Python
python在指定目录下查找gif文件的方法
2015/05/04 Python
Python win32com 操作Exce的l简单方法(必看)
2017/05/25 Python
对python3中pathlib库的Path类的使用详解
2018/10/14 Python
Python eval的常见错误封装及利用原理详解
2019/03/26 Python
python 如何利用argparse解析命令行参数
2020/09/11 Python
Python根据字符串调用函数过程解析
2020/11/05 Python
用HTML5实现鼠标滚轮事件放大缩小图片的功能
2015/06/25 HTML / CSS
澳大利亚吉他在线:Artist Guitars
2017/03/30 全球购物
美国值得信赖的婚恋交友网站:eHarmony
2018/10/04 全球购物
中学生的1000字检讨书
2014/10/11 职场文书
政协常委会议主持词
2015/07/03 职场文书
员工聘用合同范本
2015/09/21 职场文书
2015年物业管理员工工作总结
2015/10/15 职场文书
会计入职心得体会
2016/01/22 职场文书
运动会主持人开幕词
2016/03/04 职场文书
MySQL入门命令之函数-单行函数-流程控制函数
2021/04/05 MySQL