在 jQuery 中使用 BIND 或 ON 函数的最佳实践 [重复]

Posted 2023-05-09

【中文标题】在 jQuery 中使用 BIND 或 ON 函数的最佳实践 [重复]

【英文标题】：Best practice using BIND or ON functions in jQuery [duplicate]

【发布时间】：2013-04-12 02:24:15

【问题描述】：

最近 jQuery 团队开始推荐使用 on 而不是 bind 将事件绑定到 DOM。

我想知道它们之间是否有区别，使用on 函数有什么好处以及将我所有的bind 更改为on 是否是一个很好的调用我的代码中的函数？

【问题讨论】：

我猜您的标题中的意思是 "BIND and ON" 而不是 "BIND and GO"，对吧？两者之间的唯一区别是最终会消失。

.on 是自 1.7 以来附加事件侦听器的标准方法，该方法已发布大约 an year and half ago。对于像 jQuery 这样具有如此快速发布周期的项目，我不会称之为“最近”。

【参考方案1】：

jQuery 项目正朝着将越来越多的功能放在更少的方法中，而不是为每个单独的事物使用单独的方法。

bind、live 和 delegate 方法都已被单个方法 on 取代，您可以使用不同类型的参数来确定该方法的作用。

比较：

$(sel).bind(event, f);            =    $(sel).on(event, f);
$(sel).live(event, f);            =    $(document.body).on(event, sel, f);
$(sel).delegate(sel2, event, f)   =    $(sel).on(event, sel2, f);

如果你使用live，你应该替换它，因为那个方法的使用有点尴尬。此外，live 方法在 body 元素上创建了一个委托，您应该尝试将委托绑定到更近的范围。

如果您正在使用bind 和delegate，请立即将它们替换为on。您可以在新代码中执行此操作，也可以在您编辑的代码中执行此操作，但这些方法不会在不久的将来消失。

【参考方案2】：

基本用例基本没有区别

 $( '#elementID' ).bind( 'click', function()... );
 $( '#elementID' ).on( 'click', function()... );

这两个功能相同..

.on() 也进行事件委托，因此是首选。

添加.on()的想法是创建一个统一的事件API，而不是有多个函数来绑定事件；

.on() 替换 .bind()、.live() 和 .delegate()。

从 jquery 1.7 开始，...bind 只是 .on() 的别名

【参考方案3】：

On 从现在和将来附加一个事件处理程序。绑定，但是仅在您设置事件时附加该事件。如果动态添加其他元素，则不会为这些元素触发 bind。

【讨论】：

on 方法仅在您将选择器指定为参数之一时创建委托，否则它与bind 相同。

【参考方案4】：

bind 只是一个可能会被删除的简写。来自 jQuery 的源代码：

...

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

...

您可以自己查看source code 的介绍，了解有关 jQuery 工作原理的很多信息。

【讨论】：

错了。 .on() 管理事件委托，bind 没有

K，更新更精确

【参考方案5】：

区别在于bind绑定事件，on也可以绑定事件，但也可以管理事件委托。

http://api.jquery.com/on/#direct-and-delegated-events

如果您想更详细地了解这一点，请查看这篇博文：http://www.elijahmanor.com/2012/02/differences-between-jquery-bind-vs-live.html