关于jQuery中的bind on live的问题

问题描述

  1. 请问jQuery中bind live on的主要区别是什么?

  2. 什么场景下各自使用哪个函数?

阅读 3.3k
2 个回答

简单对比一下jQuery各个版本的live和bind函数实现方法:
1.7版本前的live:

live: {
        add: function( handleObj ) {
            jQuery.event.add( this,
                liveConvert( handleObj.origType, handleObj.selector ),
                jQuery.extend({}, handleObj, {handler: liveHandler, guid: handleObj.handler.guid}) ); 
        },

        remove: function( handleObj ) {
            jQuery.event.remove( this, liveConvert( handleObj.origType, handleObj.selector ), handleObj );
        }
    },

1.7版本后的live:

live: function( types, data, fn ) {
    jQuery( this.context ).on( types, this.selector, data, fn );
    return this;
},

1.9版本中,更是取消了live函数,取而代之的是采用delegate。
如果看看bind的实现的话,也能发现最终的代码如下:

bind: function( types, data, fn ) {
    return this.on( types, null, data, fn );
},

发现了吧,都是on,bind和on是等价的。

下面说一下delegate和bind(这里我们就当bind等于on好了)的区别,1个原则:

对于已经存在的页面元素,用bind,对于“未来”存在的页面元素,用delegate

似乎有点拗口,举个栗子:
你有一个页面,里面有个按钮,现在要针对这个按钮绑定click事件,我们用bind还是delegate呢,我们用bind,因为按钮元素直接存在与页面中:

$('#objId').bind('click', function() {});

同样,你有一个页面,页面没有按钮,但是n秒后(或者某些操作后)会出现一个按钮,但我们希望页面初始化的时候就给按钮绑定click事件,这时候就用delegate即可;

$(document).delegate('#objId', 'click', function() {});

delegate是将事件注册到已经存在的document,当发生click事件时,只需要匹配#objId是否跟触发的对象一致,一致即执行函数。

所以,从效率来说,bind占优,但在某些场合(特别是大量使用了Ajax的页面),delegate却不失为一种降低开发难度的办法。

jQuery 1.7 之后,都只用 .on() 了,什么 .bind() 或者 live() 之类的,内部都是调用 .on(),直接用 .on() 吧。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题