After buying the excellent new Sitepoint book, DHTML Utopia I wanted to try out something that’s been buzzing round my head for a while now – the idea of unobtrusive JavaScript. Basically, for too long web developers have been mixing JavaScript code with HTML, doing things like:
onClick="javascript:rollOver('button1');"
But no more! Using more advanced and flexible event listening techniques we can tell what is happening on the page, capture those events, and do something. So, partly as an excuse to try out that technique properly, partly as the foundations of a new project I’m toying with the idea of starting (haven’t I got enought to do already?) I wrote this demo. You’ll see what it does if you’re using a modern browser (I’ve checked it in FireFox 1.0.4 and IE 6).
The code isn’t commented, but hopefully you’ll see what I’ve done. Pay particular attention to the stuff in the <body> tags – no JavaScript calls anywhere. I’ll eventually do a more advanced version that will demonstrate how a non-JavaScript-enabled browser could interact with the script. But for now, I really should go to bed.