脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery事件绑定和委托

jQuery事件绑定和委托实例

 更新时间：2014年11月25日 14:23:01   投稿：shichen2014  
这篇文章主要介绍了jQuery事件绑定和委托,以实例形式分析了jQuery事件绑定和委托中on()、bind()、live()、delegate()的用法,具有一定的学习与借鉴价值,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • jQuery EasyUI结合zTree树形结构制作web页面

    jQuery EasyUI结合zTree树形结构制作web页面

    这篇文章主要为大家详细介绍了JQuery EasyUI 结合ztrIee的后台页面开发，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-09-09
  • jQuery中的each()详细介绍(推荐)

    jQuery中的each()详细介绍(推荐)

    jquery中的each()非常好用，用起来非常的爽，下面小编给大家介绍jquery中each()的用法详细介绍，感兴趣的朋友一起看看吧
    2016-05-05
  • jquery无缝向上滚动实现代码

    jquery无缝向上滚动实现代码

    向上滚动的效果想必大家都见过吧!无缝间歇向上滚动应该也不会陌生吧，接下来为大家介绍下jquery实现无缝间歇滚动，感兴趣的朋友可以参考下哈，希望可以帮助到你们
    2013-03-03
  • jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】

    jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】

    这篇文章主要介绍了jQuery插件FusionCharts绘制的3D饼状图效果,结合完整实例形式分析了基于FusionCharts图形插件绘制饼状图的操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
    2017-03-03
  • jquery用get实现ajax在ie里面刷新不进入后台解决方法

    jquery用get实现ajax在ie里面刷新不进入后台解决方法

    jquery用get实现ajax在ie里面刷新不进入后台的情况想必大家都有遇到过吧，下面与大家分享下具体的解决方法，希望对大家解决问题有所帮助
    2013-08-08
  • jQuery实现从身份证号中获取出生日期和性别的方法分析

    jQuery实现从身份证号中获取出生日期和性别的方法分析

    这篇文章主要介绍了jQuery实现从身份证号中获取出生日期和性别的方法,结合实例形式分析了jQuery数学运算与字符串操作相关技巧,需要的朋友可以参考下
    2016-02-02
  • jquery获取焦点和失去焦点事件代码

    jquery获取焦点和失去焦点事件代码

    鼠标在搜索框中点击的时候里面的文字就消失了，经常会用到搜索框的获得焦点和失去焦点的事件，接下来介绍一下具体代码，感兴趣的朋友额可以参考下
    2013-04-04
  • jQuery实现统计复选框选中数量

    jQuery实现统计复选框选中数量

    这里给大家分享一段jQuery实现的统计复选框选中数量的代码，非常的实用，有需要的小伙伴们请带走！
    2014-11-11
  • 谈谈jQuery Ajax用法详解

    谈谈jQuery Ajax用法详解

    jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性，本文给大家介绍jquery ajax用法详解，感兴趣的朋友一起学习吧
    2015-11-11
  • jQuery设置和移除文本框默认值的方法

    jQuery设置和移除文本框默认值的方法

    这篇文章主要介绍了jQuery设置和移除文本框默认值的方法,实例分析了jQuery操作文本框的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03

最新评论