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 相关文章推荐
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
Apr 27 Javascript
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
Sep 28 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
Oct 09 Javascript
javascript的push使用指南
Dec 05 Javascript
跨域请求的完美解决方法(JSONP, CORS)
Jun 12 Javascript
AngularJs+Bootstrap实现漂亮的计算器
Aug 10 Javascript
vue引入ueditor及node后台配置详解
Jan 03 Javascript
JS基于for语句编写的九九乘法表示例
Jan 04 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
Sep 25 Javascript
JS数组进阶示例【数组的几种函数用法】
Jan 16 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
Feb 21 Javascript
详解TypeScript中的类型保护
Apr 29 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
js下函数般调用正则的方法附代码
2008/06/22 PHP
细谈php中SQL注入攻击与XSS攻击
2012/06/10 PHP
表单提交错误后返回内容消失问题的解决方法(PHP网站)
2015/10/20 PHP
PHP获取文件扩展名的常用方法小结【五种方式】
2018/04/27 PHP
PHP 图片合成、仿微信群头像的方法示例
2019/10/25 PHP
40款非常棒的jQuery 插件和制作教程(系列二)
2011/11/02 Javascript
jQuery的one()方法用法实例
2015/01/19 Javascript
jquery结合CSS使用validate实现漂亮的验证
2015/01/29 Javascript
JQuery实现样式设置、追加、移除与切换的方法
2015/06/11 Javascript
JavaScript中Math.SQRT2属性的使用详解
2015/06/14 Javascript
C#中使用迭代器处理等待任务
2015/07/13 Javascript
七个不允许错过的jQuery小技巧
2015/12/21 Javascript
AngularJS 2.0新特性有哪些
2016/02/18 Javascript
浅析AngularJS中的指令
2016/03/20 Javascript
基于javascript实现句子翻牌网页版小游戏
2016/03/23 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
2016/08/01 Javascript
JavaScript严格模式详解
2017/01/16 Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
2017/08/31 Javascript
JS中获取 DOM 元素的绝对位置实例详解
2018/04/23 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
2018/11/13 Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
2018/11/21 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
2020/02/10 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
2020/11/17 Javascript
Python基于PycURL自动处理cookie的方法
2015/07/25 Python
Python3.4学习笔记之列表、数组操作示例
2019/03/01 Python
python 获取等间隔的数组实例
2019/07/04 Python
python GUI库图形界面开发之PyQt5线程类QThread详细使用方法
2020/02/26 Python
python实现提取COCO,VOC数据集中特定的类
2020/03/10 Python
Python 转移文件至云对象存储的方法
2021/02/07 Python
巧克力领导品牌瑞士莲美国官网:Lindt Chocolate美国
2016/08/25 全球购物
帕克纽约:PARKER NY
2018/12/09 全球购物
ParcelABC西班牙:包裹运送和快递服务
2019/12/24 全球购物
社区工作者个人总结
2015/02/28 职场文书
收入证明怎么写
2015/06/12 职场文书
优秀大学生申请书
2019/06/24 职场文书
vue 自定义组件添加原生事件
2022/04/21 Vue.js