Javascript simple binding

I've heard that JavaScript binding is a more efficient way of going about this. I've looked at some different examples but have just got confused.

I have a link with an onclick event on my page which calls a ajax function.

<a href="#" 
   title="#" 
   onclick="ajax('links to a page','div_name','loading...');showdiv('div_name');">
  my link</a>

It works fine, however id like to learn how to bind this(or any onclick event). From what i understand, by binding, the onclick event will already be loaded as the page loads therefore possibly making the user experience better. Please feel free to correct me if i'm wrong. Any help would be appreci开发者_开发问答ated.

When people refer you to bind in JavaScript in this context they are most likely referring to jQuery's .bind() function rather than the Function.bind of ECMAScript 5 (ECMAScript is JavaScript ... essentially).

As @morgancodes suggests in the comments, the concept you are actually looking for is event delegation. If you want to learn how to do this in JavaScript you'll want to look at PPK's DOM Events and learn about normalizing the event object in IE. It's a lot of work, but it's worth it in the end.

On the other hand, if you want to update the code now, you can use one of the many JavaScript libraries out there to deal with the normalizing for you:

In jQuery for example, you could bind your click event to your link in any of the following ways:

// Bind the event directly to the element.
// Advantages: clear, quick (to code)
// Disadvantages: not good for dynamically added links 
//                or in cases where you have a lot of links.
$("your_link_selector").click(function() { /* do your stuff here */ });
// Alternate:
$("your_link_selector").bind("click",function() { /* do your stuff here */ });

// Bind the event to the body and fire it when the selector matches.
// Advantages: works with dynamic content, lots of links.
// Disadvantages: slower than delegate when you have lots of live events.
$("your_link_selector").live("click",function() { /* do your stuff here */ });

// Bind the event to the selected container elements 
// Fire the event when the event_selector matches.
// Advantages: works with dynamic content, lots of links.
// Disadvantages: There are disadvantages? ;-)
$("your_container_selector").delegate("your_link_selector", 
                                      "click", 
                                      function() { /* do your stuff here */ });

Any of the other JavaScript libraries out there will be able to handle this as well -- I have avoided adding examples in order to keep the post shorter.

Add an ID to the a tag:

<a href="#" id="linkID" title="#">my link</a>

In the javascript, you can bind a function to an event like this:

document.getElementById("linkID").onclick = function() {
    ajax('links to a page','div_name','loading...');
    showdiv('div_name');
}

Well you could use JQuery for this. Or you could do something like this:

window.onload = function() {

   document.getElementById('yourlinkid').onclick = function() {
    ajax('links to a page... // add rest of your code
    }

}

You would need to add an id attribute to the anchor. For example:

<a href="#" 
   title="#" 
   id="yourlinkid"
  my link</a>

Or use another method to look it up. If you include as an external script then the window.onload event is not needed I think, but if you include in the HEAD of your document it is required. The binding approach is certainly a much neater way to do this I think.