`
youyu4
  • 浏览: 421427 次
社区版块
存档分类
最新评论

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元素。 

 

 

3. 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事件绑定和委托。分享给大家供大家参考。具体方法如下: jQuery事件的绑定和委托可以用多种方法实现,on() 、 bind() 、 live() 、 delegate() ,还有one()。   有时我们可能会像下面这样...

    jQuery 1.9.1源码分析系列(十)事件系统之绑定事件

    事件绑定的方法有很多种,使用了jquery那么原理那种绑定方式(elem.click = function(){…}))就不太想推荐给大家了。最主要的原因是elem.click=fn...这种方式事件绑定在(“#chua”)上,没有委托事件,和js原生的事件绑

    jQuery事件委托之Safari

    事件委托是Jquery中一种事件绑定的方式,不同于常见的事件绑定方式将事件绑定在目标元素上,而是将事件绑定在父级元素上通过事件冒泡来执行绑定函数。 //常见的事件绑定(Jquery) $(element).click(function(){ //...

    jquery回到顶部demo

    所有内容放在body标签下的样式名为"body-cnt"的div中,这样将jQuery事件绑定都委托给该div,避免移动端事件绑定不到document上。

    JQuery事件委托原理与用法实例分析

    本文实例讲述了JQuery事件委托原理与用法。分享给大家供大家参考,具体如下: 事件委托就是利用事件冒泡的原理,把事件加到父级上,通过判断事件来源的子集,执行相应的操作。事件委托首先可以极大的减少事件绑定...

    jquery绑定事件 bind和on的用法与区别分析

    本文实例讲述了jquery绑定事件 bind和on的用法与区别。分享给大家供大家参考,具体如下: bind和on都是给元素绑定事件用的,其最大的区别就是事件冒泡 事件冒泡也是委托事件的原型,事件委托就是子类的事情委托给父类...

    jQuery代码优化 事件委托篇

    jQuery为绑定和委托事件提供了.bind()、.live()和.delegate()方法。本文在讨论这几个方法内部实现的基础上,展示它们的优劣势及适用场合。 事件委托 事件委托的事例在现实当中比比皆是。比如,有三个同事预计会在...

    一篇一万字的jQuery事件知识总结

    文章目录事件绑定事件解绑事件冒泡什么是事件冒泡如何阻止事件冒泡默认行为什么是默认行为如何阻止默认行为jQuery事件自动触发jQuery自定义事件什么是自定义事件自定义事件满足的条件jQuery的事件命名空间什么是事件...

    javascript事件委托的方式绑定详解

    事件绑定,这里使用了冒泡的原理,从点击的元素开始,递归方式的向父元素传播事件,这样做的好处是对于大量要处理的元素,不必为每个元素都绑定事件,只需要在他们的父元素上绑定一次即可,提高性能。还有一个好处...

    ampersand-view-jquery-events:使用jQuery在委托事件中绑定事件

    使用jQuery绑定委托事件中的事件。 用法 var $ = require ( 'jquery' ) ; var AmpersandView = require ( 'ampersand-view' ) ; var jqueryEvents = require ( 'ampsersand-view-jquery-events' ) ; FooView = ...

    jQuery事件绑定.on()简要概述及应用

    前几天看到事件委托的时候,关于live()方法讲的不是很详细,就去搜了一下关于live()和delegate()的,最后看源码发现bind()和delegate()都是由on()实现的,感兴趣的朋友可以了解下,或许本文对你有所帮助

    jQuery事件委托代码实践详解

    在需要为较多的元素绑定事件时应该使用事件委托 event delegation javascript事件传播 html如下: <body> <tr><td id=targetTd></td><td></td><td></td></tr> <tr><td></td><td></td><td></td></tr> </...

    浅谈 jQuery 事件源码定位问题

    在一个不是自己写的页面上,如何快速定位到他绑定的事件代码在哪?(页面用的是jQuery) 这个问题,说难不难,说简单也没那么简单,万一用的是委托之类也会麻烦点。 在 chrome 的控制台里有个 Event Listeners,这里会...

    jquery插件使用方法大全

    ·attribute(改进了.attr()的性能)、jQuery()核心函数、CSS(.css()性能有两倍提升)、特效和事件、DOM操作等也有显著改进 1.5 美国时间1月31日John Resig在jQuery官方博客发表文章,宣布jQuery 1.5正式版已经...

    JS动态添加元素及绑定事件造成程序重复执行解决

    前言 本文主要给大家分享一下前段时间遇到的bug,这个Bug是关于jquery 的on方法绑交互事件,类似于$('#point').on('click','.read-more',function ... consol.log('jquery事件绑定') }); 第二种:  document.addEve

    jQuery中delegate和on的用法与区别详细解析

    在事件绑定和委派,delegate()和on在一般情况下,这两种方法是等效的。 .delegate() 指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。 代码如下:// jQuery 1.4.3+$...

    MingGeJS1.8.1类库 国产JQUERY

    MingGeJS1.8.0 寄语: ... 另外minggeJS支持模块及插件形式分离开发,大致用法基本和JQUERY一致,有部份函数用法则有所稍略 请大家看DEMO.html演试!(DEMO.html已大幅度更新) 我是mingge,请支持国产MingGeJs

    jQuery中on方法使用注意事项详解

    采用事件委托机制绑定事件,好处是子元素动态加入时无需再次绑定。 on方法可以传入childSelector指定添加事件处理函数的具体子元素,还可以传入对象格式的数据data,fn函数内部通过event.data.XXX获取具体参数。传入...

    详解js的事件代理(委托)

    JavaScript事件代理(委托)一般用于以下情况:  1. 事件注册在祖先级元素上,代理其子级元素。可以减少事件注册数量,节约内存开销,提高性能。  2. 对js动态添加的子元素可自动绑定事件。 之前一直用各种js库的...

Global site tag (gtag.js) - Google Analytics