inline onclick vs jquery .click() [duplicate]

Question

I have seen two ways to wire an event:

<input type="button" onclick=" printGrid() " value="Print" />

 $(document).ready(function () {


    $("#printGrid").click(function () {
        printGrid();
    });

});

Is there a difference or benefit for one over the other (besides the fact that the second is using JQuery)?

Note that this question is only about the wireup, not using inline javascript.

Inline script is bad practise. Better with proper event handler. — Sergio
– Sergio, Commented Jan 19, 2014 at 14:46
By separating your JavaScript from your html completely, you make both easier to edit and maintain in the future. — Blazemonger
– Blazemonger, Commented Jan 19, 2014 at 14:48
for single-call actions, the first one is more semantic, concise, readable, debuggable, and maintainable, but the document-centric zombie masses say you should use the second one so you can't find the event using 'Inspect Element' and have to change two files to modify the UI. — dandavis
– dandavis, Commented Jan 19, 2014 at 14:50
sarcasm aside, if you need event delegation, or are using many handler on one element, or one handler on many events, wiring them in a js file is the way to go. for boilerplate stuff in in apps (not docs), saving a few bytes on the initial download isn't worth hiding the event handler or rigging up a bunch of custom hard-coded js. i would stress the use of classes or data- attribs instead of IDs, as it makes scalability much easier. if the example jQuery code used a class instead of an ID, my response would have been more balanced... — dandavis
– dandavis, Commented Jan 19, 2014 at 18:05

Jonas Libbrecht · Accepted Answer · 2014-01-19 14:48:31Z

2

It's much cleaner. Always keep your CSS, JAVASCRIPT/JQUERY, HTML separate.

answered Jan 19, 2014 at 14:48

Jonas Libbrecht

7891 gold badge8 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

dandavis Over a year ago

on the web one should never "always" anything.

Jonas Libbrecht Over a year ago

on this subject: oh yes you do sir :-P, it's not like i got my diploma of html5 at the scrapyard :-P

dandavis Over a year ago

if you say so, but i find that during early development its much faster building with everything on one page for quick and easy find-and-replace refactoring with no cache problems. it's a lot more tabbing if one "always" uses three files from the get go...

Jonas Libbrecht Over a year ago

I know it's faster to program, but in the business world you will have to start programming directly separate. Why you can ask, or else you will have to reprogram everything, this can save your business/employer much money. ;-)

Greg Gum Over a year ago

I agree that JavaScript should not be in the HTML page. But note that was not the question: The question was only about the wire-up. Yes, if the name changed, I would have to change it where-ever it was used. But as far as the wire-up is concerned, the first way seems cleaner. Otherwise, I can't tell from looking at the button what it is wired up to.

|

Zaheer Ahmed · Accepted Answer · 2014-01-19 14:51:46Z

1

If you have this button on 5 different pages you need to call from 5 different places, then you need to change function name you have to change from all the places, So it make it hard to maintain.

Using click with jQuery has another benefit that browser cache the file and it takes less time to load.

answered Jan 19, 2014 at 14:51

Zaheer Ahmed

28.7k12 gold badges77 silver badges113 bronze badges

Collectives™ on Stack Overflow

inline onclick vs jquery .click() [duplicate]

2 Answers 2

6 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Linked

Related