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+XMLHttpRequest+asp.net无刷新读取数据库数据
Aug 09 Javascript
微博@符号的用户名提示效果。(想@到谁?)
Nov 05 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
Nov 27 Javascript
JS对象与json字符串格式转换实例
Oct 28 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
Feb 13 Javascript
Javascript模仿淘宝信用评价实例(附源码)
Nov 26 Javascript
javascript先序遍历DOM树的方法
Feb 27 Javascript
JS对HTML表格进行增删改操作
Aug 22 Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
Sep 21 Javascript
vue中如何创建多个ueditor实例教程
Nov 14 Javascript
JS中使用textPath实现线条上的文字
Dec 25 Javascript
vue router 组件的高级应用实例代码
Apr 08 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
教你如何把一篇文章按要求分段
2006/10/09 PHP
dedecms模板标签代码官方参考
2007/03/17 PHP
php的数组与字符串的转换函数整理汇总
2013/07/18 PHP
在PHP模板引擎smarty生成随机数的方法和math函数详解
2014/04/24 PHP
php中函数前加&amp;符号的作用分解
2014/07/08 PHP
php关闭warning问题的解决方法
2016/05/17 PHP
php array_walk_recursive 使用自定的函数处理数组中的每一个元素
2016/11/16 PHP
PHP实现简单计算器小程序
2020/08/28 PHP
jquery判断checkbox(复选框)是否被选中的代码
2010/10/20 Javascript
js 本地预览的简单实现方法
2014/02/18 Javascript
javascript折半查找详解
2015/01/26 Javascript
JS控制表单提交的方法
2015/07/09 Javascript
创建自己的jquery表格插件
2015/11/25 Javascript
ashx文件获取$.ajax()方法发送的数据
2016/05/26 Javascript
jQuery Mobile 触摸事件实例
2016/06/04 Javascript
浅析jQuery Ajax通用js封装
2016/06/22 Javascript
微信小程序 开发工具快捷键整理
2016/10/31 Javascript
Bootstrap CSS组件之导航条(navbar)
2016/12/17 Javascript
ES6概念 ymbol.for()方法
2016/12/25 Javascript
angularJS 指令封装回到顶部示例详解
2017/01/22 Javascript
javascript 跨域问题以及解决办法
2017/07/17 Javascript
vscode配置vue下的es6规范自动格式化详解
2019/03/20 Javascript
Vue.js中的extend绑定节点并显示的方法
2019/06/20 Javascript
常用python数据类型转换函数总结
2014/03/11 Python
python实现将html表格转换成CSV文件的方法
2015/06/28 Python
Python解惑之True和False详解
2017/04/24 Python
Python字符串大小写转换拼接删除空白
2019/09/19 Python
Python Excel vlookup函数实现过程解析
2020/06/22 Python
10个很棒的 CSS3 开发工具 推荐
2011/05/16 HTML / CSS
Kidsroom台湾:来自德国的婴儿用品
2017/12/11 全球购物
敏捷开发的主要原则都有哪些
2015/04/26 面试题
年终自我鉴定
2013/10/09 职场文书
奥巴马英文演讲稿
2014/05/15 职场文书
幽默自我介绍演讲稿
2014/08/21 职场文书
关于运动会的宣传稿
2015/07/23 职场文书
MySQL表锁、行锁、排它锁及共享锁的使用详解
2022/04/02 MySQL