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

Question

In response to jQuery .on() method - passing argument to event handler function two approaches are suggested:

Using javascript bind()

In a comment on the accepted answer Ignatio Segura suggests using javascript bind():

Actually, there is a neater syntax for that, using JS bind(): $(document).on('dblclick', '#an_tnam tr', ADS.bind(null, 'hello')); First parameter is the value you want "this" to have inside callback function. — Ignacio Segura Feb 19 2016 at 16:24

Using the data parameter in jQuery's on()

David Barker's answer suggests using the data argument of jQuery's .on()-method:

$(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);
});

which the handler can access via [event.data][6] (as shown in the annoymous handler above).

---

Question

What are the differences between bind() an the data parameter to jQuery on()?

When should I use which?

Answer 1

Differences:

• jQuery on() supplies the element from which the event originated as this.

  With Javascript bind() this is set at bind time; it does not point to the element that triggered the event unless you explicitly set it to that element (e.g. via handler.bind($(elementSelector)[0], boundValue, ...).

• Javascript bind() creates a new bound function (an "exotic function object" (see § Description in bind() API-documentation).

  The documentation for jQuery on() does not specify whether on() creates any object.

• Javascript bind() follows a more functional style of programming (i.e. using partial applied functions).

  The setting of a property in the event structure as done by jQuery's .on() is used in many different programming styles and not signature any programming paradigm in specific.

• Javascript bind() forces a specific order of parameters —which might go against what you would consider logical for the handler—; i.e.:

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

  This JSFiddle demonstrates how the bound function (e.g. bf and bf2 in the example) forwards any additional parameters to the original function (e.g. f in the example). The altered fiddle demonstrates how this works for an event handler bound via jQuery's on().

  Passing extra data via jQuery's on() 'hides' the data as a property of event

• If the handler ignores the event-object and if one wants to call the handler without an event, the handler to which extra data is bound via javascript's bind() is easy to call both with its arguments (partially) bound via the via bound function and with different values for the bound argument as a regular function; 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");

Similarities

• Programmatically triggering (see jQuery trigger() and an example fiddle) both the event with bound function and the event with extra data passed via on() passes the data to the handler.

Conclusion

• With bind() the value of this is not set to the element that triggered the event. If you rely on this being that element, then use jQuery's on().

• If you value consistency and your code uses jQuery's on() with passing extra data, then always use on() for passing extra data.

  The same holds for using bind() when the restof your code always uses bind().

• If you and your colleagues value clean functional style for javascript code, then use javascript's bind().

• If you want to avoid jQuery specific functionality as much as possible (e.g. for reasons of portability), then use javascript's bind().