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 相关文章推荐
JavaScript窗口功能指南之在窗口中书写内容
Jul 21 Javascript
jquery 插件实现图片延迟加载效果代码
Feb 06 Javascript
基于jQuery的输入框无值自动显示指定数据的实现代码
Jan 24 Javascript
javascript面向对象包装类Class封装类库剖析
Jan 24 Javascript
javascript中的window.location.search方法简介
Sep 02 Javascript
jquery实现的一个文章自定义分段显示功能
May 23 Javascript
jquery实现Ctrl+Enter提交表单的方法
Jul 21 Javascript
node.js插件nodeclipse安装图文教程
Oct 19 Javascript
vue深入解析之render function code详解
Jul 18 Javascript
npm 常用命令详解(小结)
Jan 17 Javascript
如何实现一个简易版的vuex持久化工具
Sep 11 Javascript
如何在JavaScript中创建具有多个空格的字符串?
Feb 23 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
第七节--类的静态成员
2006/11/16 PHP
PHP自定义大小验证码的方法详解
2013/06/07 PHP
php下载文件源代码(强制任意文件格式下载)
2014/05/09 PHP
ThinkPHP自动转义存储富文本编辑器内容导致读取出错的解决方法
2014/08/08 PHP
php判断对象是派生自哪个类的方法
2015/06/20 PHP
深入讲解PHP Session及如何保持其不过期的方法
2015/08/18 PHP
利用PHP获取网站访客的所在地位置
2017/01/18 PHP
PHP 实现base64编码文件上传出现问题详解
2020/09/01 PHP
Aster vs KG BO3 第二场2.18
2021/03/10 DOTA
js获取当前地址 JS获取当前URL的示例代码
2014/02/26 Javascript
jquery html动态添加的元素绑定事件详解
2016/05/24 Javascript
javascript事件处理模型实例说明
2016/05/31 Javascript
AngularJS使用指令增强标准表单元素功能
2016/07/01 Javascript
微信开发 js实现tabs选项卡效果
2016/10/28 Javascript
jquery结合html实现中英文页面切换
2016/11/29 Javascript
详解angularJS自定义指令间的相互交互
2017/07/05 Javascript
angular4中关于表单的校验示例
2017/10/16 Javascript
vue click.stop阻止点击事件继续传播的方法
2018/09/04 Javascript
Vue+Element UI+Lumen实现通用表格分页功能
2019/02/02 Javascript
简单实现vue中的依赖收集与响应的方法
2019/02/18 Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
2019/07/29 Javascript
使用vue cli4.x搭建vue项目的过程详解
2020/05/08 Javascript
js实现轮播图特效
2020/05/28 Javascript
解决VueCil代理本地proxytable无效报错404的问题
2020/11/07 Javascript
微信小程序canvas实现签名功能
2021/01/19 Javascript
Python高级应用实例对比:高效计算大文件中的最长行的长度
2014/06/08 Python
用Python将一个列表分割成小列表的实例讲解
2018/07/02 Python
Django实现简单的分页功能
2021/02/22 Python
前端canvas水印快速制作(附完整代码)
2019/09/19 HTML / CSS
无谷物狗粮:Pooch & Mutt
2018/05/23 全球购物
prAna官网:瑜伽、旅行和冒险服装
2019/03/10 全球购物
幼儿园园长岗位职责
2013/11/26 职场文书
青年创业培训欢迎词
2014/01/08 职场文书
国旗下演讲稿
2014/05/08 职场文书
中国梦团日活动总结
2014/07/07 职场文书
买卖合同协议书范本
2014/10/18 职场文书