javascript - Using jQuery .on() for all events - Stack Overflow

admin管理员组

文章数量:1406950

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?

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?

• javascript
• jquery
• pjax
• event-delegation

Share Follow asked Mar 28, 2014 at 12:35 Dan JohnsonDan Johnson 1,4821717 silver badges3838 bronze badges 4

• 3 I would imagine the click() function uses the on() function under the hood. – Brett Commented Mar 28, 2014 at 12:38
• on is used for delegation,anyway ,is your code working with "on"? – Pratik Joshi Commented Mar 28, 2014 at 12:40
• 1 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. – epascarello Commented Mar 28, 2014 at 12:43
• 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. – Alex Commented Mar 28, 2014 at 12:55

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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

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

本文标签： javascriptUsing jQuery on() for all eventsStack Overflow