Unobtrusive JavaScript’s goal is to move all the functionality (the Controller) out of the HTML (the Model) and the CSS (the View). This is also called full MVC separation.
This is how typically JavaScript and HTML mix. For example in submitting a form using a text link.
<a href="javascript:submit(document.testForm)">Submit</a>
Or for jumping to different parts of a page using a dropdown.
<input type="image" src="/img/buttons/update.gif" onClick="window.location.hash= document.jumpTo.names.options[document.jumpTo.names.selectedIndex].value">
Using the unobtrusive JavaScript technique one can separate the JavaScript from the HTML.
<div id="foo">Submit</div> <script type="text/javascript"> Event.observe($('foo'), 'click', function(event) { $(Event.element(event)).form.submit(); return false; }); </script>
We use the Protoculous JavaScript file which combines the Prototype framework and Scriptaculous libraries to do unobtrusive JavaScript.