Is it better to call functions using onclick or bind events using .click?

Question

Suppose I have a div and I want to make a certain code run when a user clicks on that div. I can accomplish that in 2 ways.

HTML

<div id="clickme">Click Me</div>

Javascript

$(document).ready(function(){
    $('#clickme').click(function(){
        //Other code here doing abc.
    });
});

the 2nd way is calling a function which does exactly that but it is called by a function

<div id="clickme" onclick="clickme()">Click Me</div>

Javascript

function clickme(){
    //Other code doing abc.
}

My question is that are both these codes doing the same thing? and which is more efficient and recommended?

Solution 1

It depends. Usuaslly if it's something quite simple I prefer to use onlick="".

On the other hand, if it's more complex and you want to execute a lot of code, I prefer to use bind events for the sake of readability.

I honestly believe that onclick="" is better in terms of performance/memory usage etc. The bind events you're using are in the layer of jquery and with onclick the event is directly invoked from your element.

It's a matter of choice, really.

Something which I like in bind events is that you have endless possibilities on what to bind and capture clicks or keystrokes. There are also jquery plugins to enhance the bind events, such as bind with delay etc (bind with delay is when you press a key and the code is executed x amount of seconds after you press it, which is great when doing search as you type over ajax as it prevents a request on each key press)

Let me know if you require further info.

Hope I gave you a good insight :)

Solution 2

It depends on whether if you prefer:

1) An anonymous function bound at the document ready event of JQuery

Which means your namespace is not cluttered with yet another function name you don't care about. It also means that the code is together with the rest of the initialization routines. It also lets you bind more than one event.

2) A declarative way of binding a named function.

Which means your function needs to be named accordingly and you will have to search the document to see if/where it is bound. It is also one less selector call so of course it is more effective speed-wise.

For coding clarity, most of the time I would advise you to separate your javascript initialization code from your HTML declarations.

Solution 3

Using .click(function(){ } is better as it follows standard event registration model.

And here you are permitted to assign multiple callbacks,

EX:

<script type="text/javascript">
$(document).ready(function() {
    $("#clickme").click(function() {
        alert("clicked!");
    });
    $("#clickme").click(function() {
        alert("I concur, clicked!");
    });
});
</script>

here if u bind your click function with bind(), then u can unbind that particular function depends on requirement.