CODEWITHSUNDEEP
jquery
Kevin Pang
Kevin Pang

Reputation: 41442

What's the difference between using jQuery's onclick and the onclick attribute?

What's the difference between the following two pieces of HTML (apologies if there are any typos as I'm typing this freehand)?

Using jQuery:

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

<a id="clickme" href="javascript:void(0);">click me</a>

Not using jQuery:

<a id="clickme" href="javascript:void(0);" onclick="alert('clicked!');">click me</a>

Upvotes: 39

Views: 40880

Answers (3)

Adam Bellaire
Adam Bellaire

Reputation: 110429

One big difference is that jQuery's events are handled in a registry which is parsed on the click event. Crucially, this means that you are permitted to assign multiple callbacks, and have them triggered in the order in which they were registered:

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

They will both be invoked on the click event, in that order. The "real" onClick event is overridden by jQuery's registry-driven system. In the vanilla document structure, without a system like jQuery in place, there can only be one onClick event.

Upvotes: 55

palehorse
palehorse

Reputation: 27476

It is also a cleaner separation of UI code (the HTML) and the logic code (the JavaScript). It makes reading each a bit easier.

Upvotes: 8

orip
orip

Reputation: 75427

One of the differences is that adding handlers with jQuery's click doesn't remove previous handlers.

Upvotes: 6

Related Questions