Query中click(),bind(),live(),delegate()的区别


Posted in Javascript onNovember 19, 2013

click(),bind(),live()都是执行事件时使用的方法,他们之前是有一些区别的,我们在使用这些方法时应该根据需要进行选择。

1.click()方法是我们经常使用的单击事件方法:

$("a").click(function(){
   alert("hello");
});

当点击<a>时,输出hello。

2.click()方法是bind()方法的一种简单方法。在bind()中,jQuery所有JavaScript事件对象,比如focus, mouseover, 和 resize,都是可以作为type参数传递进来的。我们直接看看jQuery文档中的一个例子:

var message = "left";
$("a").bind("click", function() {
   alert(message);
   return false;
});var message = "right";
$("a").bind("contextmenu", function() {
   alert(message);
   return false;
});

上边代码中,无论是左键单击还是右键单击<a>输出总是"right"。为了解决这个问题,我们可以将message作为data参数传递到到bind()方法中,如下:
var message = "left";
$("a").bind("click", { msg: message }, function(e) {
   alert(e.data.msg);
   return false;
});var
 message = "right";
$("a").bind("contextmenu", { msg: message }, function(e) {
   alert(e.data.msg);
   return false;
});

这样当我们左键单击<a>时,输出"left";当右键单击<a>时,输出"right"。

可见,一般情况下我们使用click()方法就可以了,当需要处理上边这种情况时,我们要使用bind()方法。

3.live()给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的也有效。如下:

$("div.live").bind("click", function() {
   alert("success");
});

此时,当点击class为live的div时,输出"success"。此时如果有一个新的元素添加了进来,如下:
$("<div class="live" href="#">live</div>").appendTo("body");

这时,当使用上边方法点击class为live的a标签时,不会执行。原因在于,这个元素是在调用bind()之后添加的,而使用live()方法使得在后边添加的元素也能够执行相应的事件,如下:
$("div.live").live("click", function() {
   alert("success");
});

这样,当我们单击class为live的a标签时,如果此a标签是后边添加的,也能照常输出"success"。至于原因,在这里不做具体的说明,本篇主要比较几种方法的区别。

最后,看看delegate()方法,这个方法到目前为止我自己还没有使用过,应该是在1.4.2中才有的。
live()方法的一个不足在于它不支持链式写法:

$("#test").children("a").live("mouseover", function() {
    alert("hello");
});

上边这种写法并不会输出,我们使用delegate()可以写为:
$("#test").delegate("a", "mouseover", function() {
    alert("hello");
});

这样就可以正常的输出我们想要的结果了。本篇总结了click()、bind()、live()和delegate()方法,其中并没有做非常详细的解释,仅望能对大家在具体使用时有所帮助。
Javascript 相关文章推荐
jquery 中多条件选择器,相对选择器,层次选择器的区别
Jul 03 Javascript
jQuery中校验时间格式的正则表达式小结
Sep 22 Javascript
jquery数组之存放checkbox全选值示例代码
Dec 20 Javascript
jquery选择符快速提取web表单数据示例
Mar 27 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
Aug 11 Javascript
浅述Javascript的外部对象
Dec 07 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
Feb 28 Javascript
JS实现预加载视频音频/视频获取截图(返回canvas截图)
Oct 09 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
Aug 24 Javascript
JavaScript中的连续赋值问题实例分析
Jul 12 Javascript
在Echarts图中给坐标轴加一个标识线markLine
Jul 20 Javascript
前端性能优化建议
Sep 17 Javascript
Js 去掉字符串中的空格(实现代码)
Nov 19 #Javascript
JS正则验证邮箱的格式详细介绍
Nov 19 #Javascript
js判读浏览器是否支持html5的canvas的代码
Nov 18 #Javascript
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
Nov 18 #Javascript
基于javascript滚动图片具体实现
Nov 18 #Javascript
点击页面其它地方隐藏该div的两种思路
Nov 18 #Javascript
JS 屏蔽键盘不可用与鼠标右键不可用的方法
Nov 18 #Javascript
You might like
创建数据库php代码 用PHP写出自己的BLOG系统
2010/04/12 PHP
PHP 工厂模式使用方法
2010/05/18 PHP
整理的9个实用的PHP库简介和下载
2010/11/09 PHP
Extjs中通过Tree加载右侧TabPanel具体实现
2013/05/05 Javascript
js获取当前月的第一天和最后一天的小例子
2013/11/18 Javascript
常用jQuery选择器总结
2014/07/11 Javascript
javascript返回顶部的按钮实现方法
2016/01/09 Javascript
微信小程序 简单DEMO布局,逻辑,样式的练习
2016/11/30 Javascript
nodejs个人博客开发第六步 数据分页
2017/04/12 NodeJs
jQuery实现下拉菜单的实例代码
2017/06/19 jQuery
ES6新增的math,Number方法
2017/08/06 Javascript
js实现的在本地预览图片功能示例
2019/11/09 Javascript
uni-app实现点赞评论功能
2019/11/25 Javascript
[48:00]EG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/29 DOTA
python模拟鼠标拖动操作的方法
2015/03/11 Python
分析并输出Python代码依赖的库的实现代码
2015/08/09 Python
Python三级目录展示的实现方法
2016/09/28 Python
pyhton列表转换为数组的实例
2018/04/04 Python
用Python写脚本,实现完全备份和增量备份的示例
2018/04/29 Python
python 读取txt中每行数据,并且保存到excel中的实例
2018/04/29 Python
解决Pytorch 训练与测试时爆显存(out of memory)的问题
2019/08/20 Python
numpy求平均值的维度设定的例子
2019/08/24 Python
Python内置方法实现字符串的秘钥加解密(推荐)
2019/12/09 Python
css3 给页面加个半圆形导航条主要利用旋转和倾斜样式
2014/02/10 HTML / CSS
Html5原创俄罗斯方块(基于canvas)
2019/01/07 HTML / CSS
Wiggle中国:英国骑行、跑步、游泳 & 铁三运动装备专卖网店
2016/08/02 全球购物
Tory Burch英国官方网站:美国时尚生活品牌
2017/12/06 全球购物
巴西最大的珠宝连锁店:Vivara
2019/04/18 全球购物
维也纳通行证:Vienna PASS
2019/07/18 全球购物
股东协议书
2014/04/14 职场文书
旷工检讨书大全
2015/08/15 职场文书
村官2015年度工作总结
2015/10/14 职场文书
银行中层干部培训心得体会
2016/01/11 职场文书
不知如何爱孩子,这些方法教会您
2019/08/06 职场文书
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
2022/01/18 HTML / CSS
Linux中sftp常用命令整理
2022/06/28 Servers