jQuery的.bind()与.on()


207

我找到了两篇有关此新功能的精彩文章.on()jquery4u.comelijahmanor.com

有什么方法.bind()比它还好用.on()吗?

例如,我有一个示例代码,如下所示:

$("#container").click( function( e ) {} )

您可能注意到,选择器只检索了一项,在我的情况下,加载页面时该<div>名称#container已经存在;没有动态添加。重要的是要提到我使用的是最新版本的jQuery:1.7.2。

对于该示例,即使我不使用该功能提供的其他功能,也.on()应使用该示例?.bind().on()


5
第二篇文章是垃圾。它说了.bind()绑定多个元素有多不好,但是没有提到.on()在绑定模式下使用时如何做完全相同的事情。
Alnitak

Answers:


316

在内部,.bind直接映射到.on当前版本的jQuery。(同样适用于.live。)因此,如果您改.bind而使用,则对性能的影响很小,但实际上微不足道。

但是,.bind可以随时从将来的版本中删除它。没有理由继续使用.bind.on而是有理由改为偏爱。


5
可能-几乎没有理由删除它们,因为它们只是映射到现有功能。另一方面,升级主版本号意味着您几乎可以对API进行任何操作,因为此时并不一定要保证向后兼容。只是在说'。
Blazemonger,2012年

6
@Esailija这些功能都为处理特定类型的异步请求提供了有用的快捷方式。.bind.on对于未被委托的事件相同的; .bind不提供任何形式的捷径像$.getJSON
jackwanders

7
@jbabey,尽管从技术上讲它们不一定删除任何功能,但它们仍会弃用并建议您不要使用它们。将来,他们总是可以决定完全删除它们(类似于从2.x版本中删除某些IE支持的方式)。不应使用已过时的功能。
汉娜(Hanna)2014年

8
打印“ jQuery.fn.bind.toString()”输出“函数(a,b,c){返回this.on(a,null,b,c)}”
Jowen 2014年

5
绑定和取消绑定被弃用的jQuery 3的
乔梅布尔

58

这些片段执行的功能完全相同:

element.on('click', function () { ... });
element.bind('click', function () { ... });
element.click(function () { ... });

但是,它们与这些完全不同,它们都执行相同的操作:

element.on('click', 'selector', function () { ... });
element.delegate('click', 'selector', function () { ... });
$('selector').live('click', function () { ... });

第二组事件处理程序使用事件委托,并将用于动态添加的元素。使用委托的事件处理程序的性能也更高。第一组不适用于动态添加的元素,并且性能差很多。

jQuery的on()功能不会引入尚不存在的任何新功能,而只是试图标准化jQuery中的事件处理(您不再需要在实时,绑定或委托之间做出决定)。


1
我认为您的意思是$('selector').live('click', function () { ... });这样,您将结果保持为几乎相同。
andlrc

11

直接方法和.delegate是高级API,.on并且无意弃用它们。

直接方法是可取的,因为您的代码将更少地键入字符串。错误输入事件名称而不是静默错误会立即导致错误。在我看来,它的读写clickon("click"

.delegate优于.on由于参数的顺序:

$(elem).delegate( ".selector", {
    click: function() {
    },
    mousemove: function() {
    },
    mouseup: function() {
    },
    mousedown: function() {
    }
});

您马上就知道它是委托的,因为,它说是委托。您还会立即看到选择器。

有了.on它不立即清除,如果它甚至委托,你必须看看到底该选择:

$(elem).on({
    click: function() {
    },
    mousemove: function() {
    },
    mouseup: function() {
    },
    mousedown: function() {
    }
}, "selector" );

现在,的命名.bind确实很糟糕,并且从表面上看还比差.on。但是.delegate不能执行未委派的事件,并且有些事件没有直接方法,因此在这种罕见的情况下可以使用它,但这仅是因为您希望在委派和未委派的事件之间进行清晰的分离。


8
从jQuery 3.0开始,.delegate()已被弃用。
暗淡


6

从jQuery文档中:

从jQuery 1.7开始,.on()方法是将事件处理程序附加到文档的首选方法。对于早期版本,.bind()方法用于将事件处理程序直接附加到元素。将处理程序附加到jQuery对象中当前选定的元素上,因此这些元素必须在对.bind()的调用发生时存在。有关更灵活的事件绑定,请参见.on()或.delegate()中有关事件委托的讨论。

http://api.jquery.com/bind/


1
请记住,文档的建议来自于给您带来绑定,单击,实时,委托...以及所有由此引起的混乱的团队。在阅读了有关该问题的多个站点之后,我认为最好,最准确的站点是将“ on”描述为“糖衣”的站点,糖会吸引虫子,而委托是必经之路。
DaveWalley 2014年

4

从Jquery 3.0及更高版本开始,.bind已被弃用,他们更喜欢使用.on。正如@Blazemonger早先回答的那样,它可能会被删除,并且可以肯定会被删除。对于较旧的版本,.bind也会在内部调用.on,它们之间没有区别。另请参阅API。

.bind()的jQuery API文档

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.