简单对比一下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各个版本的live和bind函数实现方法:
1.7版本前的live:
1.7版本后的live:
1.9版本中,更是取消了live函数,取而代之的是采用delegate。
如果看看bind的实现的话,也能发现最终的代码如下:
发现了吧,都是on,bind和on是等价的。
下面说一下delegate和bind(这里我们就当bind等于on好了)的区别,1个原则:
似乎有点拗口,举个栗子:
你有一个页面,里面有个按钮,现在要针对这个按钮绑定click事件,我们用bind还是delegate呢,我们用bind,因为按钮元素直接存在与页面中:
同样,你有一个页面,页面没有按钮,但是n秒后(或者某些操作后)会出现一个按钮,但我们希望页面初始化的时候就给按钮绑定click事件,这时候就用delegate即可;
delegate是将事件注册到已经存在的document,当发生click事件时,只需要匹配#objId是否跟触发的对象一致,一致即执行函数。
所以,从效率来说,bind占优,但在某些场合(特别是大量使用了Ajax的页面),delegate却不失为一种降低开发难度的办法。