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.cookie.js 操作cookie实现记住密码功能的实现代码
Apr 27 Javascript
web网页按比例显示图片实现原理及js代码
Aug 09 Javascript
js 动态修改css文件的方法
Aug 05 Javascript
jquery使用经验小结
May 20 Javascript
easyui Draggable组件实现拖动效果
Aug 19 Javascript
Jquery获取当前城市的天气信息
Aug 05 Javascript
AngularJS过滤器详解及示例代码
Aug 16 Javascript
JavaScript数据结构中串的表示与应用实例
Apr 12 Javascript
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
May 26 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
Jul 09 Javascript
基于vue中keep-alive缓存问题的解决方法
Sep 21 Javascript
小程序实现录音上传功能
Nov 22 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
Laravel 5.1 on SAE环境开发教程【附项目demo源码】
2016/10/09 PHP
PHP实现的MD5结合RSA签名算法实例
2017/10/07 PHP
JavaScript Object的extend是一个常用的功能
2009/12/02 Javascript
Jquery从头学起第四讲 jquery入门教程
2010/08/01 Javascript
javascript之querySelector和querySelectorAll使用说明
2011/10/09 Javascript
jquery获取tr中控件值并操作tr实现思路
2013/03/27 Javascript
jquery 提交值不为空的元素示例代码
2013/05/10 Javascript
javascript计算用户打开网页的停留时间
2014/01/09 Javascript
简介JavaScript中的setDate()方法的使用
2015/06/11 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
2015/09/01 Javascript
JS日期加减,日期运算代码
2015/11/05 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
2016/12/26 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
2016/12/29 Javascript
微信小程序访问node.js接口服务器搭建教程
2017/04/25 Javascript
在nginx上部署vue项目(history模式)的方法
2017/12/28 Javascript
解决vue 路由变化页面数据不刷新的问题
2018/03/13 Javascript
使用vuex存储用户信息到localStorage的实例
2019/11/11 Javascript
为什么推荐使用JSX开发Vue3
2020/12/28 Vue.js
[02:34]DOTA2英雄基础教程 幽鬼
2014/01/02 DOTA
[50:20]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第四局
2016/03/06 DOTA
python如何通过protobuf实现rpc
2016/03/06 Python
python的schedule定时任务模块二次封装方法
2019/02/19 Python
Django获取该数据的上一条和下一条方法
2019/08/12 Python
使用python的pyplot绘制函数实例
2020/02/13 Python
python读取文件指定行内容实例讲解
2020/03/02 Python
Win10环境中如何实现python2和python3并存
2020/07/20 Python
python3中for循环踩过的坑记录
2020/12/14 Python
tensorflow2.0教程之Keras快速入门
2021/02/20 Python
CSS3新属性transition-property transform box-shadow实例学习
2013/06/06 HTML / CSS
汽车销售求职自荐信
2013/10/01 职场文书
经理秘书岗位职责
2013/11/14 职场文书
八年级音乐教学反思
2014/01/09 职场文书
迅雷Cued工作心得体会
2014/01/27 职场文书
计算机维护专业推荐信
2014/02/27 职场文书
师德师风自查总结
2014/10/14 职场文书
2016年保险公众宣传日活动总结
2016/04/05 职场文书