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

Question

针对jQuery .on() method - passing argument to event handler function，建议使用两种方法：

使用javascriptbind()

在accepted answerIgnatio Segura 的评论中建议使用javascript bind()：

实际上，有一个更简洁的语法，使用 JS bind()： $(document).on('dblclick', '#an_tnam tr', ADS.bind(null, 'hello'));第一个参数是您希望“this”在回调函数中具有的值。 ——Ignacio Segura2016 年 2 月 19 日 16:24

在jQuery的on()中使用data参数

David Barker 的回答建议使用 jQuery 的 .on()-method 的 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] 访问（如上面的烦人处理程序所示）。

---

问题

bind() 和 data 参数与 jQuery on() 有什么区别？

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

Answer 1

区别：

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

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

• Javascript bind() 创建一个新的绑定函数（一个“exotic function object”（参见bind() API-documentation 中的§ Description）。

  jQuery on() 的文档没有说明 on() 是否创建任何对象。

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

  event 结构中的属性设置由 jQuery 的 .on() 完成，用于许多不同的编程风格，而不是具体地签名任何编程范式。

• Javascript bind() 强制参数的特定顺序——这可能与你认为处理程序的逻辑相悖——；即：

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

  This JSFiddle 演示了绑定函数（例如示例中的 bf 和 bf2）如何将任何附加参数转发给原始函数（例如示例中的 f）。 altered 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() 和example fiddle）带有绑定函数的事件和带有通过on() 传递的额外数据的事件将数据传递给处理程序。

结论

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

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

  当您的其余代码始终使用 bind() 时，使用 bind() 也是如此。

• 如果您和您的同事重视 javascript 代码的简洁功能样式，请使用 javascript 的bind()。

• 如果您想尽可能避免使用 jQuery 特定功能（例如出于可移植性的原因），请使用 javascript 的 bind()。