Should I use In-line or Wired event handlers

Which is preferred/right or when should you use one over the other and also the benefits/downsides to using the following:

<a href="#" id="hypMyLink" onClick="myFunc();">a link</a>

<script>
    function myFunc()开发者_JS百科{
        //do something
    }
</script>

OR...

<a href="#" id="hypMyLink">a link</a>

<script>
    $(function() {
        $('#hypMyLink').click(function(e) {
            //do something
        });            
    });
</script>
    

In a perfect world of markup - all things being semantic you would seperate your markup, styling and javascript in their respective files.

It just makes things so much easier to debug and in an industry where things change so often it makes it extremely simple if you know exactly what you are looking for be it events, styling or markup.

As an example: moving to css files doing all the styling I have found that prethought is increased by segregating your elements that you require to select at a later time.

Unobtrusive (i.e., no JavaScript embedded in HTML markup outside of <script> tags) is the way to go. Why? For several reasons:

It reinforces separation of concerns. Why should your HTML care about behavior?

It makes graceful degradation/progressive enhancement possible. You can feature detect and handle user interactions much more gracefully depending on what the user's browser actually allows.

It makes editing and maintenance far easier. Instead of searching throughout your markup for JavaScript references to edit, all of your script is in a centralized location.

The previous answers approached the problem strictly from the separation of concerns point of view, but there are also some good technical reasons to have the event handlers in javascript. In my opinion, chief amongst them is that you can use closures to encapsulate some of the information necessary for the event handler.

For example, imagine you're receiving a list of locations and a placeholder, and you want to draw a list of links to those places and have an alert popup with the name of the place when you click it. This is an example of how to do that:

function alertGenerator(loc) {
  return function() {alert("Hi, I'm visiting " + loc);};
}

function createLocationList(locations, placeholder) {
  // Create a jQuery wrapper for placeholder
  var $placeholder = $(placeholder),
    loc,
    location,
    $link; 
  // loop over the locations, create a link for each iteration
  for (var loc in locations) if locations.hasOwnProperty(loc) {
    location = locations[loc];
    $link = $("<a>");
    $link.text(location).click(alertGenerator(location));
    $placeholder.append($link);
  }    
}

If you were to try and do this with the onclick attribute, you'd have two big issues. First, you'd be dealing mostly with strings, rather than actual functions and DOM elements (or jQuery objects). That sort of code is, in my experience, a lot harder to debug.

Second, if you were to parametrize the function call in the onclick, then the parameter would have to be a global so that it would be in-scope inside the callback.