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

Question

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>

Solution 1

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.

Solution 2

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

Solution 3

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