jQuery .on()数据参数与使用javascript bind()的区别

Differences between jQuery .on() data argument and using javascript bind()?

本文关键字：javascript bind 区别 on 数据 参数 jQuery      更新时间：2023-09-26

对于jQuery .on()方法-向事件处理函数传递参数，建议采用两种方法:

使用javascript bind()

Ignatio Segura建议使用javascript bind():

实际上，有一个更整洁的语法，使用JS bind(): $(document)。("双击",# an_tnam tr, ADS.bind (null, '你好'));第一个参数是你希望"this"在回调函数中拥有的值。 - Ignacio Segura Feb 19 2016 at 16:24

使用jQuery的on()

中的data参数

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

$(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]访问它(如上面的匿名处理程序所示)。

jQuery on()的bind()和data参数有什么区别?

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

差异:

  • jQuery on()提供事件起源的元素作为this。

    与Javascript bind() this设置在绑定时;它不会指向触发事件的元素，除非你显式地将其设置为该元素(例如通过handler.bind($(elementSelector)[0], boundValue, ...) .

    • )。

  • Javascript bind()创建了一个新的绑定函数(一个"外来函数对象")(参见bind() api文档中的§描述)。

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

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

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

  • Javascript bind()强制参数的特定顺序-这可能与您认为处理程序的逻辑相反-;例如:

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

    这个JSFiddle演示了绑定函数(例如示例中的bf和bf2)如何将任何附加参数转发给原始函数(例如示例中的f)。修改后的fiddle演示了通过jQuery的on()绑定的事件处理程序是如何工作的。

    通过jQuery的on()传递额外的数据'隐藏'数据作为event的属性

  • 如果处理程序忽略事件对象和如果想要调用没有事件的处理程序，则通过javascript的bind()绑定额外数据的处理程序很容易调用它的参数(部分)通过via绑定函数绑定，并且绑定参数作为常规函数具有不同的值;例如:

    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()和一个示例fiddle)绑定函数的事件和通过on()传递额外数据的事件将数据传递给处理程序。
结论

  • 对于bind(), this的值不设置为触发事件的元素。如果您依赖于this作为该元素，那么使用jQuery的on()。

  • 如果你看重一致性，你的代码使用jQuery的on()来传递额外的数据，那么总是使用on()来传递额外的数据。

    • 当您的代码的其余部分总是使用bind()时，使用bind()也是如此。

  • 如果你和你的同事重视javascript代码的干净功能风格，那么使用javascript的bind()。

  • 如果你想尽量避免jQuery特定的功能(例如为了可移植性的原因)，那么使用javascript的bind()。

相关文章：