问题描述
请问qjQuery中bind live onq的主要区别是什么?
什么场景下各自使用哪个函数?
简单对比一下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却不失为一种降低开发难度的办法。
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。