jQuery事件绑定和委托实例


Posted in Javascript onNovember 25, 2014

本文实例讲述了jQuery事件绑定和委托。分享给大家供大家参考。具体方法如下:

jQuery事件的绑定和委托可以用多种方法实现,on()  、 bind()  、 live()  、 delegate() ,还有one()。
 
有时我们可能会像下面这样绑定一个事件:

$("#div1").click(function() {  

    alert("点击后触发");  

});

上面的事件绑定,我们可以通过多种方式去实现:
 
1. on()

//无数据参数  

$("p").on("click", function(){  

alert( $(this).text() );  

});  

  

//有数据参数  

function myHandler(event) {  

alert(event.data.foo);  

}  

$("p").on("click", {foo: "bar"}, myHandler)

与on()对应的是off(),用来移除事件绑定:

var foo = function () {  

  // code to handle some kind of event  

};  

// ... now foo will be called when paragraphs are clicked ...  

$("body").on("click", "p", foo);  

  

// ... foo will no longer be called.  

$("body").off("click", "p", foo);

off():移除on()进行的绑定
one():只绑定一次。
 
2. bind()

参数:
(type,[data],function(eventObject))
type: 含有一个或多个事件类型的字符串,由空格分隔多个事件。比如"click"或"submit",还可以是自定义事件名。
data:作为event.data属性值传递给事件对象的额外数据对象
 
fn:绑定到每个匹配元素的事件上面的处理函数
 
(type,[data],false)
type:含有一个或多个事件类型的字符串,由空格分隔多个事件。比如"click"或"submit",还可以是自定义事件名。
data:作为event.data属性值传递给事件对象的额外数据对象
 
false: 将第三个参数设置为false会使默认的动作失效。
 
同时绑定多个事件类型:

$('#foo').bind('mouseenter mouseleave', function() {  

  $(this).toggleClass('entered');  

});

同时绑定多个事件类型/处理程序:

$("button").bind({  

  click:function(){$("p").slideToggle();},  

  mouseover:function(){$("body").css("background-color","red");},    

  mouseout:function(){$("body").css("background-color","#FFFFFF");}    

});

你可以在事件处理之前传递一些附加的数据。

function handler(event) {  

  alert(event.data.foo);  

}  

$("p").bind("click", {foo: "bar"}, handler)

通过返回false来取消默认的行为并阻止事件起泡。

$("form").bind("submit", function() { return false; })

bind存在的问题

如果表格中要绑定单击事件的有10列500行,那么查找和遍历5000个单元格会导致脚本执行速度明显变慢,而保存5000个td元素和相应的事件处理程序也会占用大量内存(类似于让每个人亲自站在门口等快递)。

在前面这个例子的基础上,如果我们想实现一个简单的相册应用,每页只显示50张照片的缩略图(50个单元格),用户点击“第x页”(或“下一页”)链接可以通过Ajax从服务器动态加载另外50张照片。在这种情况下,似乎使用.bind()方法为50个单元格绑定事件又可以接受了。

事实却不然。使用.bind()方法只会给第一页中的50个单元格绑定单击事件,动态加载的后续页面中的单元格都不会有这个单击事件。换句话说,.bind()只能给调用它的时候已经存在的元素绑定事件,不能给未来新增的元素绑定事件(类似于新来的员工收不到快递)。

事件委托可以解决上述两个问题。具体到代码上,只要用jQuery 1.3新增的.live()方法代替.bind()方法即可:

$("#info_table td").live("click",function(){/*显示更多信息*/});

这里的.live()方法会把click事件绑定到$(document)对象(但这一点从代码中体现不出来,这也是.live()方法饱受诟病的一个重要原因,稍后再详细讨论),而且只需要给$(document)绑定一次(不是50次,更不是5000次),然后就能够处理后续动态加载的照片单元格的单击事件。在接收到任何事件时,$(document)对象都会检查事件类型和事件目标,如果是click事件且事件目标是td,那么就执行委托给它的处理程序。
 
unbind():移除bind进行的绑定。
 
3. live()

到目前为止,一切似乎很完美。可惜,事实并非如此。因为.live()方法并不完美,它有如下几个主要缺点:
$()函数会找到当前页面中的所有td元素并创建jQuery对象,但在确认事件目标时却不用这个td元素集合,而是使用选择符表达式与event.target或其祖先元素进行比较,因而生成这个jQuery对象会造成不必要的开销;
默认把事件绑定到$(document)元素,如果DOM嵌套结构很深,事件冒泡通过大量祖先元素会导致性能损失;
只能放在直接选择的元素后面,不能在连缀的DOM遍历方法后面使用,即$("#info_table td").live...可以,但$("#info_table").find("td").live...不行;
收集td元素并创建jQuery对象,但实际操作的却是$(document)对象,令人费解。
解决之道
为了避免生成不必要的jQuery对象,可以使用一种叫做“早委托”的hack,即在$(document).ready()方法外部调用.live():

(function($){  

    $("#info_table td").live("click",function(){/*显示更多信息*/});  

})(jQuery);

在此,(function($){...})(jQuery)是一个“立即执行的匿名函数”,构成了一个闭包,可以防止命名冲突。在匿名函数内部,$参数引用jQuery对象。这个匿名函数不会等到DOM就绪就会执行。注意,使用这个hack时,脚本必须是在页面的head元素中链接和(或)执行的。之所以选择这个时机,因为这时候刚好document元素可用,而整个DOM还远未生成;如果把脚本放在结束的body标签前面,就没有意义了,因为那时候DOM已经完全可用了。

为了避免事件冒泡造成的性能损失,jQuery从1.4开始支持在使用.live()方法时配合使用一个上下文参数:

$("td",$("#info_table")[0]).live("click",function(){/*显示更多信息*/});

这样,“受托方”就从默认的$(document)变成了$("#info_table")[0],节省了冒泡的旅程。不过,与.live()共同使用的上下文参数必须是一个单独的DOM元素,所以这里指定上下文对象时使用的是$("#info_table")[0],即使用数组的索引操作符来取得的一个DOM元素。 
 
4. delegate()

如前所述,为了突破单一.bind()方法的局限性,实现事件委托,jQuery 1.3引入了.live()方法。后来,为解决“事件传播链”过长的问题,jQuery 1.4又支持为.live()方法指定上下文对象。而为了解决无谓生成元素集合的问题,jQuery 1.4.2干脆直接引入了一个新方法.delegate()。
 
使用.delegate(),前面的例子可以这样写:

$("#info_table").delegate("td","click",function(){/*显示更多信息*/});

使用.delegate()有如下优点(或者说解决了.live()方法的如下问题):
直接将目标元素选择符("td")、事件("click")及处理程序与“受拖方”$("#info_table")绑定,不额外收集元素、事件传播路径缩短、语义明确;

支持在连缀的DOM遍历方法后面调用,即支持$("table").find("#info").delegate...,支持精确控制;

可见,.delegate()方法是一个相对完美的解决方案。但在DOM结构简单的情况下,也可以使用.live()。

提示:使用事件委托时,如果注册到目标元素上的其他事件处理程序使用.stopPropagation()阻止了事件传播,那么事件委托就会失效。
 
undelegate(): 移除delegate的绑定

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
鼠标滑过出现预览的大图提示效果
Feb 26 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
Jun 23 Javascript
js实现点击按钮弹出上传文件的窗口
Dec 23 Javascript
使用 vue.js 构建大型单页应用
Feb 10 Javascript
详解webpack-dev-server的简单使用
Apr 02 Javascript
Vue 获取数组键名的方法
Jun 21 Javascript
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
Sep 13 Javascript
微信公众号获取用户地理位置并列出附近的门店的示例代码
Jul 25 Javascript
vue父组件给子组件的组件传值provide inject的方法
Oct 23 Javascript
vue请求服务器数据后绑定不上的解决方法
Oct 30 Javascript
详解vue或uni-app的跨域问题解决方案
Feb 21 Javascript
AJAX学习笔记
May 18 Javascript
2014最热门的JavaScript代码高亮插件推荐
Nov 25 #Javascript
JS跨域问题详解
Nov 25 #Javascript
javascript 中__proto__和prototype详解
Nov 25 #Javascript
js 加密压缩出现bug解决方案
Nov 25 #Javascript
js Object2String方便查看js对象内容
Nov 24 #Javascript
js的[defer]和[async]属性
Nov 24 #Javascript
使用JavaScript 编写简单计算器
Nov 24 #Javascript
You might like
建立文件交换功能的脚本(二)
2006/10/09 PHP
Codeigniter上传图片出现“You did not select a file to upload”错误解决办法
2014/06/12 PHP
PHP函数eval()介绍和使用示例
2014/08/20 PHP
laravel 5 实现模板主题功能(续)
2015/03/02 PHP
PHP函数rtrim()使用中的怪异现象分析
2017/02/24 PHP
js自带函数备忘 数组
2006/12/29 Javascript
用js实现控件的隐藏及style.visibility的使用
2013/06/14 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
2013/12/24 Javascript
JavaScript编程中window的location与history对象详解
2015/10/26 Javascript
Javascript基于AJAX回调函数传递参数实例分析
2015/12/15 Javascript
jQuery遍历json的方法(推荐)
2016/06/12 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
2016/10/19 Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
2018/11/15 Javascript
vue项目打包上传github并制作预览链接(pages)
2019/04/19 Javascript
通过vue手动封装on、emit、off的代码详解
2019/05/29 Javascript
js闭包和垃圾回收机制示例详解
2021/03/01 Javascript
[01:03:38]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS CIS
2014/05/22 DOTA
[40:19]2018完美盛典CS.GO表演赛
2018/12/17 DOTA
[01:08:29]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第一场 1月9日
2021/03/11 DOTA
Python群发邮件实例代码
2014/01/03 Python
在Python中操作字符串之rstrip()方法的使用
2015/05/19 Python
星球大战与Python之间的那些事
2016/01/07 Python
python中将函数赋值给变量时需要注意的一些问题
2017/08/18 Python
Python 逐行分割大txt文件的方法
2017/10/10 Python
flask + pymysql操作Mysql数据库的实例
2017/11/13 Python
Empty test suite.(PyCharm程序运行错误的解决方法)
2018/11/30 Python
python redis 删除key脚本的实例
2019/02/19 Python
使用python获取邮箱邮件的设置方法
2019/09/20 Python
python中使用asyncio实现异步IO实例分析
2021/02/26 Python
详解CSS3选择器的使用方法汇总
2015/11/24 HTML / CSS
教师党员整改措施
2014/10/24 职场文书
教师学期述职自我鉴定
2019/08/16 职场文书
导游词之新疆尼雅遗址
2019/10/16 职场文书
css中z-index: 0和z-index: auto的区别
2021/08/23 HTML / CSS
使用javascript解析二维码的三种方式
2021/11/11 Javascript
JavaScript文档对象模型DOM
2021/11/20 Javascript