Let's rewrite the previous example to follow unobtrusive JavaScript principles:
First, we'll remove all the
onclickattributes. By doing so, we've effectively separated our website's functionality from its content structure. Here's the revised code:<html> <head> <script type="text/javascript"> function mouseClick() { alert( 'You clicked me!' ); } </script> </head> <body> <ul id="nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </body> </html>Now remove the
mouseClick()function; we don't need it anymore.<html> <head> <!-- mouseClick() function is now bye-bye. --> </head> <body> <ul id="nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href...