Using jQuery .on() for all events
event-delegation, javascript, jquery, pjax
Solution
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:
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..
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!!!
Problem
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?