inline onclick vs jquery .click()

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, Jan 19 '14 at 14:46
By separating your JavaScript from your html completely, you make both easier to edit and maintain in the future. — Blazemonger, Jan 19 '14 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, Jan 19 '14 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, Jan 19 '14 at 18:05

score 2 · Answer 1 · answered Jan 19 '14 at 14:48

2

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

answered Jan 19 '14 at 14:48

Jonas Libbrecht

768
1
8
17

1

on the web one should never "always" anything. – dandavis Jan 19 '14 at 15:00
on this subject: oh yes you do sir :-P, it's not like i got my diploma of html5 at the scrapyard :-P – Jonas Libbrecht Jan 19 '14 at 15:03
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... – dandavis Jan 19 '14 at 15:06
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. ;-) – Jonas Libbrecht Jan 19 '14 at 15:17
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. – Greg Gum Jan 19 '14 at 15:39
i think he changed the question because that was actually the question :p – Jonas Libbrecht Jan 22 '14 at 09:03

score 1 · Accepted Answer · answered Jan 19 '14 at 14:51

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.

inline onclick vs jquery .click()

2 Answers2