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 1.4 15个你应该知道的新特性(译)
Jan 24 Javascript
基于jQuery实现的百度导航li拖放排列效果,即时更新数据库
Jul 31 Javascript
关于js数组去重的问题小结
Jan 24 Javascript
JS对象与json字符串格式转换实例
Oct 28 Javascript
TypeError document.getElementById(...) is null错误原因
May 18 Javascript
通过示例彻底搞懂js闭包
Aug 10 Javascript
初探JavaScript 面向对象(推荐)
Sep 03 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
Mar 03 Javascript
微信小程序中转义字符的处理方法
Mar 28 Javascript
Vue路由模块化配置的完整步骤
Aug 14 Javascript
vant自定义二级菜单操作
Nov 02 Javascript
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
Dec 24 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
Re:从零开始的异世界生活 第2季 开播啦
2020/07/24 日漫
PHP新手上路(八)
2006/10/09 PHP
在Windows下编译适用于PHP 5.2.12及5.2.13的eAccelerator.dll(附下载)
2010/05/04 PHP
Apache实现Web Server负载均衡详解(不考虑Session版)
2013/07/05 PHP
yii的入口文件index.php中为什么会有这两句
2016/08/04 PHP
php使用自定义函数实现汉字分割替换功能示例
2017/01/30 PHP
Laravel服务容器绑定的几种方法总结
2020/06/14 PHP
js读取被点击次数的简单实例(从数据库中读取)
2014/03/07 Javascript
js全选实现和判断是否有复选框选中的方法
2015/02/17 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
2015/08/23 Javascript
JavaScript利用Date实现简单的倒计时实例
2017/01/12 Javascript
es6的数字处理的方法(5个)
2017/03/16 Javascript
nodejs socket服务端和客户端简单通信功能
2017/09/14 NodeJs
Angular4学习教程之DOM属性绑定详解
2018/01/04 Javascript
浅谈Vue路由快照实现思路及其问题
2018/06/07 Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
2019/09/05 Javascript
使用typescript改造koa开发框架的实现
2020/02/04 Javascript
Jquery 获取相同NAME 或者id删除行操作
2020/08/24 jQuery
[02:37]2018DOTA2亚洲邀请赛赛前采访-EG篇
2018/04/03 DOTA
[01:21:07]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
在Python上基于Markov链生成伪随机文本的教程
2015/04/17 Python
Python3 replace()函数使用方法
2018/03/19 Python
python 模拟创建seafile 目录操作示例
2019/09/26 Python
Django对接支付宝实现支付宝充值金币功能示例
2019/12/17 Python
Python读取YAML文件过程详解
2019/12/30 Python
Python利用 utf-8-sig 编码格式解决写入 csv 文件乱码问题
2020/02/21 Python
python要安装在哪个盘
2020/06/15 Python
python 爬取免费简历模板网站的示例
2020/09/27 Python
阳光体育:Sunny Sports(购买露营和远足设备)
2018/08/07 全球购物
饿了么订餐官网:外卖、网上订餐
2019/06/28 全球购物
化工专业个人的求职信范文
2013/11/28 职场文书
销售主管岗位职责范本
2014/02/14 职场文书
优秀党支部书记事迹材料
2014/05/29 职场文书
文艺委员竞选稿
2015/11/19 职场文书
2016年教师学习教师法心得体会
2016/01/20 职场文书
nginx sticky实现基于cookie负载均衡示例详解
2022/12/24 Servers