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模板技术
Apr 27 Javascript
javascript时区函数介绍
Sep 14 Javascript
用JS实现3D球状标签云示例代码
Dec 01 Javascript
jquery插件jTimer(jquery定时器)使用方法
Dec 23 Javascript
使用JQuery在线制作ppt并在线演示源码特效
Sep 08 Javascript
JS比较两个数值的大小实例
Nov 25 Javascript
Jquery Easyui选项卡组件Tab使用详解(10)
Dec 18 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
Nov 15 Javascript
JS实现的简单分页功能示例
Aug 23 Javascript
关于JavaScript中高阶函数的魅力详解
Sep 07 Javascript
详解js模板引擎art template数组渲染的方法
Oct 09 Javascript
微信小程序 动态修改页面数据及参数传递过程详解
Sep 27 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
咖啡是不是喝了会上瘾?咖啡是必须品吗!
2021/03/04 新手入门
PHP strip_tags()去除HTML、XML以及PHP的标签介绍
2014/02/18 PHP
PHP文件锁定写入实例解析
2014/07/14 PHP
php中的ini配置原理详解
2014/10/14 PHP
CodeIgniter分页类pagination使用方法示例
2016/03/28 PHP
PHP数据库操作Helper类完整实例
2016/05/11 PHP
用js计算页面执行时间的函数
2006/12/07 Javascript
网页广告中JS代码的信息监听示例
2014/04/02 Javascript
JavaScript中判断原生函数检查function是否是原生代码
2014/09/09 Javascript
js实现精美的银灰色竖排折叠菜单
2015/05/16 Javascript
javascript转换静态图片,增加粒子动画效果
2015/05/28 Javascript
jQuery+css3实现文字跟随鼠标的上下抖动
2015/07/31 Javascript
jquery获取img的src值的简单实例
2016/05/17 Javascript
AngularJS表格详解及示例代码
2016/08/17 Javascript
微信小程序学习(4)-系统配置app.json详解
2017/01/12 Javascript
微信小程序手势操作之单触摸点与多触摸点
2017/03/10 Javascript
js如何编写简单的ajax方法库
2017/08/02 Javascript
原生javascript实现的全屏滚动功能示例
2017/09/19 Javascript
React Native预设占位placeholder的使用
2017/09/28 Javascript
微信禁止下拉查看URL的处理方法
2017/09/28 Javascript
jQuery实现的记住帐号密码功能完整示例
2019/08/03 jQuery
基于jQuery拖拽事件的封装
2020/11/29 jQuery
使用python编写批量卸载手机中安装的android应用脚本
2014/07/21 Python
Python中decorator使用实例
2015/04/14 Python
基于python爬虫数据处理(详解)
2017/06/10 Python
python创建列表和向列表添加元素的实现方法
2017/12/25 Python
Python中.join()和os.path.join()两个函数的用法详解
2018/06/11 Python
Python 迭代,for...in遍历,迭代原理与应用示例
2019/10/12 Python
python tornado使用流生成图片的例子
2019/11/18 Python
PYQT5开启多个线程和窗口,多线程与多窗口的交互实例
2019/12/13 Python
详解CSS3新增的背景属性
2019/12/25 HTML / CSS
Oracle里面常用的数据字典有哪些
2014/02/14 面试题
JAVA中运算符的分类及举例
2015/09/12 面试题
我的中国梦演讲稿小学篇
2014/08/19 职场文书
初中军训感言
2015/08/01 职场文书
浅谈pytorch中的dropout的概率p
2021/05/27 Python