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获取DOM元素位置和尺寸大小的方法
Apr 12 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
Oct 25 Javascript
jquery 隐藏与显示tr标签示例代码
Jun 06 Javascript
jQuery应用之jQuery链用法实例
Jan 19 Javascript
JS实现灵巧的下拉导航效果代码
Aug 25 Javascript
jQuery简单创建节点的方法
Sep 09 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
Dec 06 Javascript
Javascript中JSON数据分组优化实践及JS操作JSON总结
Dec 22 Javascript
JS随机数产生代码分享
Feb 24 Javascript
单页面vue引入百度统计的使用方法示例详解
Oct 13 Javascript
Vue中实现权限控制的方法示例
Jun 07 Javascript
原生小程序封装跑马灯效果
Oct 21 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
使用PHP把HTML生成PDF文件的几个开源项目介绍
2014/11/17 PHP
用json方式实现在 js 中建立一个map
2014/05/02 Javascript
javascript清空table表格的方法
2015/05/14 Javascript
js兼容火狐获取图片宽和高的方法
2015/05/21 Javascript
javascript字符串替换函数如何一次性全部替换掉
2015/10/30 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
2016/07/06 Javascript
JS自定义混合Mixin函数示例
2016/11/26 Javascript
CSS+jQuery实现简单的折叠菜单
2016/12/20 Javascript
js html实现计算器功能
2018/11/13 Javascript
apicloud拉起小程序并传递参数的方法示例
2018/11/21 Javascript
vue自动路由-单页面项目(非build时构建)
2019/04/30 Javascript
17道题让你彻底理解JS中的类型转换
2019/08/08 Javascript
js滚轮事件 js自定义滚动条的实现
2020/01/18 Javascript
python定时检查某个进程是否已经关闭的方法
2015/05/20 Python
Python简单调用MySQL存储过程并获得返回值的方法
2015/07/20 Python
Python使用回溯法子集树模板解决爬楼梯问题示例
2017/09/08 Python
python如何为创建大量实例节省内存
2018/03/20 Python
python基于http下载视频或音频
2018/06/20 Python
Sanic框架应用部署方法详解
2018/07/18 Python
Python 字符串换行的多种方式
2018/09/06 Python
Django--权限Permissions的例子
2019/08/28 Python
Python values()与itervalues()的用法详解
2019/11/27 Python
CSS3的column-fill属性对齐列内容高度的用法详解
2016/07/01 HTML / CSS
HTML5探秘:用requestAnimationFrame优化Web动画
2018/06/03 HTML / CSS
HTML5的标签的代码的简单介绍 HTML5标签的简介
2012/05/28 HTML / CSS
canvas压缩图片以及卡片制作的方法示例
2018/12/04 HTML / CSS
Canvas 像素处理之改变透明度的实现代码
2019/01/08 HTML / CSS
小学生自我评价范例
2013/09/24 职场文书
计算机通信专业推荐信
2014/02/22 职场文书
2014学习全国两会精神心得体会2000字
2014/03/11 职场文书
教研活动总结
2014/04/28 职场文书
列车乘务员工作不细心检讨书
2014/10/07 职场文书
公安机关党的群众路线教育实践活动剖析材料
2014/10/10 职场文书
实名检举信范文
2015/03/02 职场文书
Python Matplotlib绘制动画的代码详解
2022/05/30 Python
Python序列化模块JSON与Pickle
2022/06/05 Python