【问题标题】:Best practice using BIND or ON functions in jQuery [duplicate]在 jQuery 中使用 BIND 或 ON 函数的最佳实践 [重复]
【发布时间】: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 这样具有如此快速发布周期的项目,我不会称之为“最近”。

标签: javascript jquery events jquery-mobile binding


【解决方案1】:

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

bindlivedelegate 方法都已被单个方法 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 元素上创建了一个委托,您应该尝试将委托绑定到更近的范围。

如果您正在使用binddelegate,请立即将它们替换为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

      【讨论】:

        猜你喜欢
        • 2012-08-13
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2012-09-11
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多