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 相关文章推荐
Prototype1.6 JS 官方下载地址
Nov 30 Javascript
基于jquery的一个图片hover的插件
Apr 24 Javascript
Javascript 按位取反运算符 (~)
Feb 04 Javascript
原生javascript实现Tab选项卡切换功能
Jan 12 Javascript
Js控制滑轮左右滑动实例
Feb 13 Javascript
JavaScript观察者模式(经典)
Dec 09 Javascript
详解Node.js模块间共享数据库连接的方法
May 24 Javascript
基于Bootstrap table组件实现多层表头的实例代码
Sep 07 Javascript
js实现左右两侧浮动广告
Jul 09 Javascript
vue transition 在子组件中失效的解决
Nov 12 Javascript
解决ant Design中Select设置initialValue时的大坑
Oct 29 Javascript
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
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 fread()使用技巧
2010/01/22 PHP
常用的PHP数据库操作方法(MYSQL版)
2011/06/08 PHP
PHP实现的带超时功能get_headers函数
2015/02/10 PHP
PHP SPL标准库中的常用函数介绍
2015/05/11 PHP
Yii2.0 RESTful API 基础配置教程详解
2018/12/26 PHP
PHP连接MySQL数据库的三种方式实例分析【mysql、mysqli、pdo】
2019/11/04 PHP
JS.findElementById()使用介绍
2013/09/21 Javascript
javascript 数字格式化输出的实现代码
2013/12/10 Javascript
jQuery实现简单的图片查看器
2020/09/11 Javascript
理解javascript异步编程
2016/01/27 Javascript
jquery获取复选框的值的简单实例
2016/05/26 Javascript
打字效果动画的4种实现方法(超简单)
2017/10/18 Javascript
Mac下安装vue
2018/04/11 Javascript
如何在Vue中抽离接口配置文件
2019/10/31 Javascript
[01:04:31]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第二场 1月8日
2021/03/11 DOTA
Python实现网络端口转发和重定向的方法
2016/09/19 Python
Python实现字符串与数组相互转换功能示例
2017/09/22 Python
Python使用修饰器执行函数的参数检查功能示例
2017/09/26 Python
pygame游戏之旅 游戏中添加显示文字
2018/11/20 Python
PyQT5 QTableView显示绑定数据的实例详解
2019/06/25 Python
python实现自动化报表功能(Oracle/plsql/Excel/多线程)
2019/12/02 Python
使用pytorch搭建AlexNet操作(微调预训练模型及手动搭建)
2020/01/18 Python
pymongo insert_many 批量插入的实例
2020/12/05 Python
HTML5 video播放器全屏(fullScreen)方法实例
2015/04/24 HTML / CSS
简单介绍HTML5中的文件导入
2015/05/08 HTML / CSS
详解使用双缓存解决Canvas clearRect引起的闪屏问题
2019/04/29 HTML / CSS
清洁工岗位职责
2014/01/29 职场文书
文科生自我鉴定
2014/02/15 职场文书
汽车促销活动方案
2014/03/31 职场文书
科长竞争上岗演讲稿
2014/05/12 职场文书
校园文化标语
2014/06/18 职场文书
2014迎接教师节演讲稿
2014/09/10 职场文书
大学生国家助学金感谢信
2015/01/23 职场文书
大学运动会加油稿
2015/07/22 职场文书
勤俭节约主题班会
2015/08/13 职场文书
电工实训心得体会
2016/01/14 职场文书