Essentials of Javascript - Cultural View

Unobtrusive JavaScript 137
keep all JavaScript code, including event handlers, outside of the HTML. Stuart Langridge has since expanded upon
this thought in book [10] and article format. [11]
Separation of behavior from markup
Traditionally, JavaScript often was placed inline together with an HTML document's markup. For example, the
following is a typical implementation of JavaScript form validation when written inline:
Adherents to "Unobtrusive Javascript" argue that the purpose of markup is to describe a document's structure, not its
programmatic behavior and that combining the two negatively impacts a site's maintainability for similar reasons that
combining content and presentation does. They also argue that inline event handlers are harder to use and maintain,
when one needs to set several events on a single element or when one is using event delegation. Nor can they be used
with custom events.
The unobtrusive solution is to register the necessary event handlers programmatically, rather than inline. That is to
say, rather than using the event handlers as shown with the hyperlink above to directly fire the desired action, the
following methods are used. These are commonly achieved by assigning a particular CSS selector to all elements
which need to be acted upon by the script:
The script can then look for all input elements with the name date, and set them up accordingly:
Using native JavaScript, HTML5 events and DOM Level 2 event listeners:
document.addEventListener("domcontentloaded", function() {
// domcontentloaded will fire when the DOM is loaded but unlike
"load" it does not wait for images, etc.
// It is being standardized in HTML5
// It is assumed that there is only one element with name="date"
document.getElementsByName("date")[0].addEventListener("change",
validateDate, false);
}, false);
function validateDate(){
// Do something when the content of the 'input' element with the
name 'date' is changed.
}
The above example will not work in all browsers; some – particularly Internet Explorer (including version 8) – do
not support DOM 2 event listeners. In practice developers often use libraries to get away from browser
inconsistencies and deficiencies. The following script is specific to the MooTools JavaScript library, but
accomplishes the same setup:
window.addEvent('domready', function() {
});
$$('input[name=date]').addEvent('change', validateDate);
The following script is specific to the jQuery JavaScript library:
$(document).ready(function(){
$('input[name=date]').bind('change', validateDate);