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."); });
