javascript - 关于jQuery中的bind on live的问题

Question

问题描述

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

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

Answer 1

简单对比一下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却不失为一种降低开发难度的办法。

Answer 2

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