Using jQuerys document.Ready function to attach events to elements

Question

Normal style

<a href="#" id="myLink" onclick="myFunc();">click me</a>

function myFunc() {
    alert('hello!');
}

jQuery style

<a href="#" id="myLink">click me</a>

$(document).ready(function() {
    $("#myLink").click(function() {
        alert('hello!');
    });
});

I've just started using jQuery, but I'm wondering what the difference between these two is. Should I prefer the jQuery method? Are there any advantages when doing it this way?

Imho I don't like that when reading the html with the jQuery method, there's no clue as to what the link does. I've found the jQuery attach method really useful when attaching to multiple elements (eg. $("#myTable tr").click(function(e) {...});), but when dealing with a singular element I don't know which I should be using.

Answer 1

I like the second approach, for a few reasons.

1. It keeps all of the javascript stuff in one place; you're right that when you read the HTML you don't know what clicking the link will do, but the flip side is that if you define the event handler inline, then when you read the javascript, you don't know when the function will be called. I like to keep my "layers" separate as much as possible.

2. It promotes what is sometimes called "unobtrusive javascript", as well as graceful degradation of your application. The idea of graceful degradation (or "progressive enhancement") is that you make the link a real link that would go to a separate page, but then you use javascript to hijack the click event, and provide the same functionality without leaving the page. This way, if the user doesn't have javascript (say they are a disabled user using a screen reader) the application still works.

3. It makes the javascript more reusable; say I define the element to bind my event handler to based on something generic such as a CSS class. Then I can drop that javascript onto a variety of pages and have it "just work". I do this all the time for things like autosave, for example.

Answer 2

JQuery's way of handling events is defined unobtrusive (http://en.wikipedia.org/wiki/Unobtrusive_JavaScript) and is usually preferred over the "standard" way because you have a clear separation between logic and presentation, and generally code is more reusable.

Not to mention that JQuery (but other libraries does the same thing too) handle browser inconsistencies for you.

Answer 3

I know your concern because I had a similar concern and decided to use Jquery and namespacing to bind events from a javascript namespace. This is how I worked around hooking events to a single element as well as hooking events to multiple elements with the same class or tagname.

Basically I namespaced my click, hover, mouseover, etc... events and then call the namespaced events in my document.ready. The reason for this is I can look at all my click, hover, mouseover events from one place.

<script type="text/javascript">

  var Page1 = {
    Events: {
       click: {
         elementid: {
           func: function(evt) {  //where elementname is the id of your element
           //your code here
           },
           selector: "#someId"
         }
         elementclass: {
           func: function(evt) { //where elementclass is the class of your element(s)
           //your code here
           },
           selector: ".someClass"
         },
       mouseover: {
         //similar to click namespace
       },
       mouseout: {
         //similar to click namespace
       },
       ....
    }
  };

  $(document).ready(function() {
    for (var key in Page1.Events) {
      for (var eventKey in Page1.Events[key]) {
        $(Page1.Events[key][eventKey].selector).bind(key, Page1.Events[key][eventKey].func);
      }
    }
  });

</script>

Now the nice thing about this is you simply add events to your namespace and they will automatically get hooked on document ready. you could also replace the $.bind call with Live or delegate to hook to future dom elements.

Answer 4

Imho I don't like that when reading the html with the jQuery method, there's no clue as to what the link does.

The browser with JavaScript disabled has no clue what your link does either. They see a link pointing them to the top of the document!

Other answers already give you a number of reasons to avoid onclick style events in your HTML... I also try my best to avoid <a href="#"> links in my HTML, ensuring that any <a> tags in the document have a purpose. I will often use jQuery to create extra <a> tags to add the functionality only if the browser will let me handle the click events on them