Using jQuery .on() for all events

Question

Is it considered bad practice to use jQuery's .on() event handler for every event?

Previously, my code contained script like this:

$('#cartButton').click(function(){
    openCart();
});

However I've recently started using InstantClick (a pjax jQuery plugin).

Now none of my scripts work. I understand why this is happening, but I cannot wrap my code with the InstantClick.on('change', function(){ tag as this means my code starts to repeat itself. For example, clicking on the cart button will run the openCart() function many times. So to get around this, I'm changing all my functions to something like this:

$(document).on('click', '#cartButton', function(){
    openCart();
});

I'm curious as to whether this will increase loading times and cause excess strain. Is it bad practice to use the on() event handler for every event in my code?

Answer 1

It's not bad practice at all..

.on is the preferred method for handling all events, and using .click is just a shortcut that gets passed to the .on method anyway..

If you check out here (unminified source for jquery 2.1.0): https://code.jquery.com/jquery-2.1.0.js

Here are a couple notes:

1. search for this line: on: function( types, selector, data, fn, /*INTERNAL*/ one ) {

   This is the function definition for the on method and just shows you what the code is doing..

2. also search for this line: jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick "

   Th code below this line is mapping all the directly callable shortcuts (like click) and shows you that they are just mapping to the 'on' method.

Hope this helps!!!

Answer 2

No it is not a bad practice to use .on(), actually if you check the source of the .click() function, you'll see that it actually calls .on().

But... Instead of creating an anonymous function, you should simply do this, which would be cleaner, and slightly faster:

$(document).on('click', '#cartButton', openCart);

and

$('#cartButton').click(openCart);