JQuery: is it a good idea to use Javascript events as inline attributes?

When reading about JQuery best practices, I read this recently:

Never include Javascript events as inline attributes. This practice should be completel开发者_Go百科y wiped from your mind.

<a onclick="doSomething()" href="#">Click!</a>

Why is this? Is this interpretation? Personally, I find that JQuery is best when you need to dynamically set events, or set an event to a div. Otherwise, it allows for much cleaner code, as the inline attribute can always call a method of your choice.

btw, article in question: http://www.smashingmagazine.com/2008/09/16/jquery-examples-and-best-practices/

One of the reasons why I agree with the article is it involves the separation of layers between your code. Inline code leads to sloppy, hard to maintain code. By including the script files you are reducing the amount of time used to change code / clean up code / fix bugs. If that inline function doSomething() becomes really popular across your projects that embedding it into each page can be a nightmare.

I admit I've gone against this at times, but it has bitten me in the past. I can't say I will completely change my habits 100%, but it's a good programming practice. It isn't something that I would consider wrong though. There are millions of shops out there that still do it, they will most likely do it 10 years from now. To each his own.

The main reason inline events are not recommended is that they are very difficult to maintain. Generally, you should place all your javascript in a separate file (there are cases where "inlining" your javascript/css/images is beneficial to performance).

Also, you have to remember that jQuery is just javascript. So, any article implying that every event should always be bound via jQuery is silly. However, if you already have jQuery loaded it is probably a pretty good idea to use it as it takes care of many of cross-browser issues that may arise.

Now to do this in pure javascript, in a more maintainable fashion, you can always:

document.getElementById("hello").onclick = function(){
    // p.s. I clobber any previous onclick handlers 
    // that may have been assigned to this element.
    // Sure, there are ways around this. But they are lame.
    /* If you use this method of event binding in an    */
    /* application/site make sure you don't include     */
    /* it in your resume/portfolio. :-)                 */
    alert("Hello."); 
};

or better yet use something like this (untested!!!):

var addEvent = (function( window, document ) {  
    if ( document.addEventListener ) {  
        return function( elem, type, cb ) {  
            if ( (elem && !elem.length) || elem === window ) {  
                elem.addEventListener(type, cb, false );  
            }  
            else if ( elem && elem.length ) {  
                var len = elem.length;  
                for ( var i = 0; i < len; i++ ) {  
                    addEvent( elem[i], type, cb );  
                }  
            }  
        };  
    }  
    else if ( document.attachEvent ) {  
        return function ( elem, type, cb ) {  
            if ( (elem && !elem.length) || elem === window ) {  
                elem.attachEvent( 'on' + type, function() { return cb.call(elem, window.event) } );  
            }  
            else if ( elem.length ) {  
                var len = elem.length;  
                for ( var i = 0; i < len; i++ ) {  
                    addEvent( elem[i], type, cb );  
                }  
            }  
        };  
    }  
}( this, document ));

// Use like this:
var element = document.getElementById("hello");
addEvent(element, "click", function(){ alert("Hello."); });