Difference between using ID and onClick

Question

I apologize if this post has been made before but I wasn't able to find it.

Imagine we have

<button class="sample-class" role="button" tabindex="0" id="onEvent">play</button>

and then a Javascript to trigger it, like so

<script>
     $("#onEvent").click(function(){
       //do something
     })
<script>

Now if we have the same thing as such

<button class="sample-class" role="button" tabindex="0" onClick="foo()">play</button>

and we trigger it by

<script>
  function foo()
  {
     //Do something
  }
</script>

Could someone tell me the difference between using the two? In terms of which one gets called first, which is more efficient and if I use both, will they work?

Thanks!

You probably want to read [onclick=“” vs event handler](http://stackoverflow.com/q/6941483/218196), which asks why inline event handlers should be avoided. — Felix Kling, Feb 11 '16 at 06:23
@Patrick: This question is about inline event handlers vs jQuery I guess, whereas yours is DOM `onClick` vs `addEventListener`. Related, but not the same. — Felix Kling, Feb 11 '16 at 06:27
I think javascript function is more efficient and it will execute fast. Because jquery is a library which is developed using javascript. — Lalji Nakum, Feb 11 '16 at 06:28
You should simply have a look at http://www.quirksmode.org/js/introevents.html, which will tell you everything you need to know about event handling, which concepts exists and their pros and cons. — Felix Kling, Feb 11 '16 at 06:28
@FelixKling - I'm not sure if this question is *deliberately* about jQuery rather than addEventListener - it's not actually tagged "jQuery". I think (guess? Assume?) that it is more about the general principle of whether to use inline handlers or not. — nnnnnn, Feb 11 '16 at 06:48
@FelixKling, well jQuery uses addEventListener internally, so it ends up being the same thing, and the answers there answer the foremost question here, being "whats the difference", so to me that satisfies the dupe checks — Patrick Evans, Feb 11 '16 at 06:49
@PatrickEvans: It seems the accepted answer does talk about inline event handlers. Fair enough :) — Felix Kling, Feb 11 '16 at 06:51
@nnnnnn: I rather meant the difference between HTML onclick and DOM onClick than the difference between jQuery and addEventListener. — Felix Kling, Feb 11 '16 at 06:52

Bhojendra Rauniyar · Answer 1 · 2016-02-11T06:42:09.343

Could someone tell me the difference between using the two?

The first code is using external script to do the task. But second code is using inline script to do the task. There's no difference in the event handler but just difference between how you use the code to call the event.

Most of us use second method ie. to say avoid inline-script.

In terms of which one gets called first

The browser will render inline-script first as it is loaded before the script is loaded if you keep your script before the closing tag of body. And if you use script inside the head tag then this code will be called first.

which is more efficient and if I use both, will they work?

Both will work. But what if you have various things to do with that event? Putting it in the inline-script would wary of that.

You don't need to worry of using external script ie. if someone worry about if the user has disabled the browser the script wouldn't run. Because modern websites are all made up with javascript/jquery. So, you may enforce the visitor to enable the javascript to run the website properly.

Thank you very much! However, when you say that the first is using an external script while the second is using inline, what exactly do you mean? One is calling a function on click and the other is calling some procedures based on the id right? So how exactly are you classifying one as external and the other as internal? — Izy-, Feb 11 '16 at 09:06

score 1 · Accepted Answer · answered Feb 11 '16 at 06:47

If you think about it similarly to how CSS works,

onclick= : id= :: style= : class=

By that, I mean the first of each is mixing the actual functionality of what you're trying to do with the declaration and presentation of the page. The "cleaner" approach is to take the approach of separation of concerns -- allowing the HTML to be the presenter and the JavaScript to handle the functionality, in the same way a CSS stylesheet takes care of the styling aspects, as opposed to declaring styles in-line.

The result, with few exceptions, is generally more portable and maintainable. It's also saves you from little headaches in the future. For example, if you were to rename the function foo to bar, and you declare onclick='foo()' in 50 places on your website, well, that's 50 changes to onclick attributes. If you use the alternative (binding the element to javascript via the ID), you have a one-line change.

Also, note that you are not restricted to matching on IDs. You can attach javascript methods to classes as well, or a combination of both, so you have great flexibility there with no additional markup to your HTML.

For additional details on the overall concept relevant to your question, see: https://en.wikipedia.org/wiki/Unobtrusive_JavaScript#Separation_of_behavior_from_markup

score 0 · Answer 3 · answered Feb 11 '16 at 06:29

0

Both these works in same way.But to get the 1st one working you need to add the jquery file reference.

I prefer to go with the 1st, just cause of the simple reason its way too easy as it says "jQuery is a lightweight, "write less, do more", JavaScript library."

If you want to add click function on multiple div, if you go for onclick function you will have to write onclick everywhere and too much of coding in the html is not a good practice.But if you are using click function you can give a common class and call the click function for everything.

answered Feb 11 '16 at 06:29

Jibin Balachandran

3,381
1
24
38

What do you mean by add jquery file reference? Won't writing it in script tags at the end of the file do the trick? Or are you talking in terms of putting the js in a different file and then linking it? – Izy- Feb 11 '16 at 09:03
@Izy- Just writing it inside script tags won't be enough. You need to have the js file in your project folder and link it or else use a CDN. – Jibin Balachandran Feb 11 '16 at 09:39

Difference between using ID and onClick

3 Answers3