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 相关文章推荐
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
Mar 02 Javascript
jquery 插件实现多行文本框[textarea]自动高度
Mar 04 Javascript
整理Javascript基础入门学习笔记
Nov 29 Javascript
jQuery计算文本框字数及限制文本框字数的方法
Mar 01 Javascript
JavaScript中instanceof运算符的使用示例
Jun 08 Javascript
js实现String.Fomat的实例代码
Sep 02 Javascript
使用Angular.js开发的注意事项
Oct 19 Javascript
JavaScript中清空数组的方法总结
Dec 02 Javascript
Vue 过渡(动画)transition组件案例详解
Jan 22 Javascript
详解原生JS回到顶部
Mar 25 Javascript
基于VUE的v-charts的曲线显示功能
Oct 01 Javascript
jQuery实现视频展示效果
May 30 jQuery
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
收音机发烧友应当熟知的100条知识
2021/03/02 无线电
DOMXML函数笔记
2006/10/09 PHP
css动画效果之animation的常用样式
2021/03/09 HTML / CSS
收藏一些不常用,但是有用的代码
2007/03/12 Javascript
一些有用的JavaScript和jQuery的片段分享
2011/08/23 Javascript
JavaScript输入邮箱自动提示实例代码
2014/01/13 Javascript
Javascript中3种实现继承的方法和代码实例
2014/08/12 Javascript
JavaScript中的style.cssText使用教程
2014/11/06 Javascript
通过伪协议解决父页面与iframe页面通信的问题
2015/04/05 Javascript
jQuery遮罩层效果实例分析
2016/01/14 Javascript
JS函数定义方式的区别介绍
2016/03/22 Javascript
js完整倒计时代码分享
2016/09/18 Javascript
微信小程序 利用css实现遮罩效果实例详解
2017/01/21 Javascript
vue开发调试神器vue-devtools使用详解
2017/07/13 Javascript
vue mixins组件复用的几种方式(小结)
2017/09/06 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
2017/12/14 Javascript
详解webpack4升级指南以及从webpack3.x迁移
2018/06/12 Javascript
vue.js单文件组件中非父子组件的传值实例
2018/09/13 Javascript
ReactRouter的实现方法
2021/01/25 Javascript
在Python编程过程中用单元测试法调试代码的介绍
2015/04/02 Python
用于统计项目中代码总行数的Python脚本分享
2015/04/21 Python
python如何实现远程控制电脑(结合微信)
2015/12/21 Python
Sanic框架异常处理与中间件操作实例分析
2018/07/16 Python
calendar在python3时间中常用函数举例详解
2020/11/18 Python
法国时尚童装网站:Melijoe
2016/08/10 全球购物
英国网络托管和域名领导者:Web Hosting UK
2017/10/15 全球购物
英国版MAC彩妆品牌:Illamasqua
2018/04/18 全球购物
西班牙Polo衫品牌:Polo Club
2020/08/09 全球购物
连锁酒店店长职责范本
2014/02/13 职场文书
应聘英语教师求职信
2014/04/24 职场文书
公司年会策划方案
2014/05/17 职场文书
关于读书的演讲稿800字
2014/08/27 职场文书
入党积极分子对十八届四中全会期盼的思想汇报
2014/10/17 职场文书
后天观后感
2015/06/08 职场文书
Python中的datetime包与time包包和模块详情
2022/02/28 Python
golang用type-switch判断interface的实际存储类型
2022/04/14 Golang