bind()、.live()、.delegate()和.on()之间的区别详解

bind()

$( "#members li a" ).bind( "click", function( e ) {} ); 
将类型和一个处理函数直接注册到了被选中的DOM元素中。它很好的解决了各种跨浏览器的问题。
它仍然非常简洁,但是也存在着一些性能方面的问题
优点:
    适用于各种浏览器
    连接事件处理函数非常方便快捷
    对于ID选择器,使用.bind() 方法可以很快地连接事件处理函数,而且当事件被触发时, 事件处理函数几乎是马上就被调用了
缺点:
    这样方法会将所有的事件处理函数附加到所有匹配的元素
    当操作大量匹配的元素时会有性能方面的问题
    附加操作是在前期完成的,这可能导致页面加载时存在性能问题

live()

$( "#members li a" ).live( "click", function( e ) {} );
将与事件处理函数关联的选择器和事件信息一起附加到文档的根级元素(即document)。通过将事件信息注册到document上,这个事件处理函数将允许所有冒泡到document的事件调用它(例如委托型、传播型事件)。一旦有一个事件冒泡到document元素上,Jquery会根据选择器或者事件的元数据来决定哪一个事件处理函数应该被调用,如果这个事件处理函数存在的话。这个额外的工作将会在用户交互时对性能方面造成一定的影响,但是初始化注册事件的过程相当地快。
优点:
    所有的事件处理函数都只会被注册一次,而不是像bind()那样进行多次注册
    将bind()方法升级到live()方法非常方便,你仅需要将"bind"替代为"live"就可以了
    那些被动态添加到DOM的元素也将被神奇的匹配到,因为真实的事件信息是被注册到document元素上的
    你可以在文档加载完之前连接事件处理函数,这样可以帮助你更好地利用你可能没有用的时间

缺点:
    这个方法在Jquery 1.7以后的版本被弃用了,你应该在你的代码里逐步放弃使用它
    使用这个方法时链式操作没有得到正确的支持,可能会出现某些错误
    所做的匹配操作基本上没用因为它只用于在document元素上注册事件处理函数
    使用 event.stopPropogation() 方法将会没用,因为事件总是已经被委托到了document元素上
    因为所有的选择器或者事件信息都被附加到document元素上了,所以一旦有一个事件要调用某个事件处理函数,Jquery会在一大堆储存的元数据中使用matchesSelector方法来决定哪一个事件处理函数将会被调用,如果这个函数有的话。
    因为你所连接的事件总是被委托到document上,所如果你的DOM的层级很深的话,这会导致一定的性能问题

delegate

$( "#members" ).delegate( "li a", "click", function( e ) {} );
与事件处理函数关联的选择器和事件信息将会被附加到 $( "#members" )这个元素上。这样做比使用live()高效多了,因为live()方法总是将与事件处理函数关联的选择器和事件信息附加到document元素上。
优点:
    你可以选择将选择器或者事件信息附加到指定的元素。
    匹配操作实际上在前面并没有执行,而是用来注册到指定的元素。
    链式操作可以得到正确的支持
    Jquery仍然需要迭代这些选择器或者事件信息来匹配元素,不过因为你可以选择哪一个元素作为根元素,所以筛选的量会大幅减少
    因为这项技术使用了事件委托机制,它可以匹配到被动态地添加到DOM的元素
    你可以在文档加载完之前连接事件处理函数

缺点:
    从.bind()方法不可以直接升级到.delegate()方法
    Jquery仍然需要使用marchesSelector方法在附加到指定根元素的选择器或者事件信息中筛选决定哪一个事件处理函数会被调用。然而,附加到指定根元素的元数据会比使用live()方法的时候要小得多。
    当操作大量匹配的元素时会有性能方面的问题
    附加操作是在前期完成的,这可能导致页面加载时存在性能问题

on方法

在Jquery 1.7版本中`.bind()` , `.live()` 和`.delegate()`方法只需要使用`.on()`方法一种方式来调用它们。
当然`.unbind()` , `.die()` 和.`undelegate()`方法也一样。

bind: function( types, data, fn ) {
 return this.on( types, null, data, fn );
},
unbind: function( types, fn ) {
 return this.off( types, null, fn );
},
 
live: function( types, data, fn ) {
 jQuery( this.context ).on( types, this.selector, data, fn );
 return this;
},
die: function( types, fn ) {
 jQuery( this.context ).off( types, this.selector || "**", fn );
 return this;
},
 
delegate: function( selector, types, data, fn ) {
 return this.on( types, selector, data, fn );
},
undelegate: function( selector, types, fn ) {
 return arguments.length == 1 ? 
  this.off( selector, "**" ) : 
  this.off( types, selector, fn );
}

考虑到这一点,使用`.on()`方法看起来像以下方式一样...
// Bind
$( "#members li a" ).on( "click", function( e ) {} ); 
$( "#members li a" ).bind( "click", function( e ) {} );
 
// Live
$( document ).on( "click", "#members li a", function( e ) {} ); 
$( "#members li a" ).live( "click", function( e ) {} );
 
// Delegate
$( "#members" ).on( "click", "li a", function( e ) {} ); 
$( "#members" ).delegate( "li a", "click", function( e ) {} );

你可能注意到了,我如何使用`.on()`方法决定了它如何调用其他方法。
你可以认为`.on()`方法被具有不同签名的方法”重载“了,而这些方法实现了不同的事件绑定的连接方式。
 `.on()`方法的出现为API带来了很多方面的一致性,并希望让事情变得不那么混乱。

优点:
*   使各种事件绑定方法一致。
*   因为在Jquery源码中`.bind()` , `.live()` 和`.delegate()`方法实际上是调用了此方法,因此简化了jQuery代码库并删除了一级重定向。
*   这种方式仍然提供了使用`.delegate()`方法的优点,并且仍然提供对`.bind()`方法的支持,如果你需要的话。

缺点:

*   给人带来了一些疑惑,因为方法的实际执行方式将根据你如何调用方法而改变。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,922评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,591评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,546评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,467评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,553评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,580评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,588评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,334评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,780评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,092评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,270评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,925评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,573评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,194评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,437评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,154评论 2 366
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,127评论 2 352

推荐阅读更多精彩内容