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 核心函数以及jQuery对象
Mar 23 Javascript
让ie运行js时提示允许阻止内容运行的解决方法
Oct 24 Javascript
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
Jan 12 Javascript
js 控制下拉菜单刷新的方法
Mar 03 Javascript
js 获取(接收)地址栏参数值的方法
Apr 01 Javascript
JS中自定义定时器让它在某一时刻执行
Sep 02 Javascript
React Native 图片查看组件的方法
Mar 01 Javascript
微信小程序实现九宫格抽奖
Apr 15 Javascript
vue配置接口域名方法总结
May 12 Javascript
Vue 动态添加路由及生成菜单的方法示例
Jun 20 Javascript
vue 判断元素内容是否超过宽度的方式
Jul 29 Javascript
如何在 Vue 表单中处理图片
Jan 26 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 开发环境配置(Zend Server安装)
2010/04/28 PHP
php在服务器执行exec命令失败的解决方法
2012/03/03 PHP
php微信公众号开发之二级菜单
2018/10/20 PHP
对字符串进行HTML编码和解码的JavaScript函数
2010/02/01 Javascript
javascript中最常用的继承模式 组合继承
2010/08/12 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
2013/05/07 Javascript
JavaScript 和 Java 的区别浅析
2013/07/31 Javascript
jQuery下的动画处理总结
2013/10/10 Javascript
JS实现拖动示例代码
2013/11/01 Javascript
页面装载js及性能分析方法介绍
2014/03/21 Javascript
解析JavaScript中的字符串类型与字符编码支持
2016/06/24 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
2016/07/12 Javascript
使用JS组件实现带ToolTip验证框的实例代码
2017/08/23 Javascript
element ui table 增加筛选的方法示例
2018/11/02 Javascript
jQuery实现的记住帐号密码功能完整示例
2019/08/03 jQuery
修改layui的后台模板的左侧导航栏可以伸缩的方法
2019/09/10 Javascript
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
2019/09/16 Javascript
基于vue 动态菜单 刷新空白问题的解决
2020/08/06 Javascript
使用FastCGI部署Python的Django应用的教程
2015/07/22 Python
python中zip()方法应用实例分析
2016/04/16 Python
python中文件变化监控示例(watchdog)
2017/10/16 Python
火车票抢票python代码公开揭秘!
2018/03/08 Python
数据清洗--DataFrame中的空值处理方法
2018/07/03 Python
python中dict字典的查询键值对 遍历 排序 创建 访问 更新 删除基础操作方法
2018/09/13 Python
使用python Fabric动态修改远程机器hosts的方法
2018/10/26 Python
python ftplib模块使用代码实例
2019/12/31 Python
解决Keras使用GPU资源耗尽的问题
2020/06/22 Python
基于selenium及python实现下拉选项定位select
2020/07/22 Python
CSS3实现同时执行倾斜和旋转的动画效果
2016/10/27 HTML / CSS
金蝶的一道SQL笔试题
2012/12/18 面试题
中西医结合临床医学专业大学生自荐信
2013/09/28 职场文书
汽车运用工程专业毕业生推荐信
2013/12/25 职场文书
学习党章思想汇报
2014/01/07 职场文书
完美主义个人的自我评价
2014/02/17 职场文书
质量管理标语
2014/06/12 职场文书
python中的mysql数据库LIKE操作符详解
2021/07/01 MySQL