jQuery .on()数据参数和使用javascript bind()之间的区别?

时间:2016-09-19 12:54:21

标签: javascript jquery events javascript-events

回应jQuery .on() method - passing argument to event handler function建议采用两种方法:

使用javascript bind()

在对accepted answer Ignatio Segura的评论中建议使用javascript bind()

  

实际上,有一个更简洁的语法,使用JS bind():$(document).on(' dblclick',' #an_tnam tr',ADS.bind( null,' hello'));第一个参数是你想要的值"这个"有内部回调函数。    - Ignacio Segura 2016年2月19日16:24

在jQuery' s on()

中使用data参数

David Barker的回答建议使用jQuery .on()-methoddata参数:

$(document).on('dblclick', '#an_tnam tr', { extra : 'random string' }, function(event)
{
    var data = event.data;

    // Prints 'random string' to the console
    console.log(data.extra);
});

处理程序可以通过[event.data][6]访问(如上面的烦人的处理程序所示)。

问题

bind()与jQuery on() data参数之间有什么区别?

我什么时候应该使用哪个?

1 个答案:

答案 0 :(得分:0)

差异:

  • jQuery on()提供发起事件的元素this

    使用Javascript bind() this设置为绑定时间;除非您明确将其设置为该元素,否则它不会指向触发事件的元素(例如,通过handler.bind($(elementSelector)[0], boundValue, ...)

  • Javascript bind()会创建一个新的约束函数(" exotic function object"(请参阅§ Description中的bind() API-documentation)。

    jQuery on()的文档未指定on()是否创建任何对象。

  • Javascript bind()遵循更具功能性的编程风格(即使用部分应用函数)。

    由jQuery' s event完成的.on()结构中的属性设置用于许多不同的编程风格,而不是签名任何特定的编程范例。

    < / LI>
  • Javascript bind()强制执行特定的参数顺序 - 这可能与您认为处理程序的逻辑顺序相反;即:

    function handler(boundParameter_1, ..., boundParameter_n, event) { ... }

    This JSFiddle演示了绑定函数(例如示例中的bfbf2)如何将任何其他参数转发给原始函数(例如示例中的f)。 altered fiddle演示了如何通过jQuery&#39; on()绑定的事件处理程序。

    通过jQuery传递额外数据on()&#39;隐藏&#39;数据作为event

  • 的属性
  • 如果处理程序忽略事件对象,如果想要在没有事件的情况下调用处理程序,则通过javascript&绑定额外数据的处理程序#39; s bind()很容易调用它们的参数(部分)通过via bound函数绑定,并且绑定参数的值不同作为常规函数; e.g:

    var boundHandler = handler.bind(null, "Bound value 1", ..., "Bound value n"); // Call without event: boundHandler();
    // Call with different values: handler("Other value 1", ..., "Final other value");

相似性

  • 以编程方式触发(参见jQuery trigger()example fiddle)具有绑定功能的事件和通过on()传递额外数据的事件将数据传递给处理程序。

结论

  • 使用bind()时,this的值未设置为触发事件的元素。如果您依赖this作为该元素,那么请使用jQuery&#39; on()

  • 如果您重视一致性,并且您的代码使用jQuery&#39; on()传递额外数据,那么请始终使用on()传递额外数据。

    当代码的其余部分始终使用bind()时,使用bind()同样适用。

  • 如果您和您的同事重视javascript代码的简洁功能样式,请使用javascript&#39; s bind()

  • 如果您想尽可能避免使用jQuery特定功能(例如出于可移植性的原因),请使用javascript&#39; bind()