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?

Junk

I would imagine the click() function uses the on() function under the hood. – Airspace

on is used for delegation,anyway ,is your code working with "on"? – Manas

It would be better to try to get the click event closer to the element that the element is in than to hook everything up to the document. – Madeline

As epascarello said, you don't need to hook the listeners up to the document. You can use the first parent of the element that exists in the DOM when the JS loads. – Amersfoort

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!!!

Brunei

Thanks for your detailed response! I guess I'm mostly curious as to whether using $(document) will make much difference to speed, as I am unable to hook it up to anything closer to the element in question. – Junk

If you're always searching from $(document) for elements, with no caching of dom variables, then there will probably be a rather large speed and memory hit (depending on your HTML structure). Think about it: if you're always searching from the root element of the page, then every time you make a call it has to traverse the document tree to find the nodes you're looking for, instead of having things more specific, using ID's and classes closer to the elements with which you are interacting. – Brunei

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);

Ozellaozen

faster by partial milliseconds. – Madeline

@Madeline I had to Google it after I read your comment...Microseconds :D – Whitechapel

Of course, but it's also cleaner, and reduces your filesize. – Ozellaozen