What is unobtrusive javascript? How to add behavior to an element using javascript?

Unobtrusive Javascript refers to the argument 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. 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.

<input type=”text” name=”date” />

Say an input field with the name “date” had to be validated at runtime:


addEventListener(“change”, validateDate,false);

function validateDate()


// Do something when the content of the ‘input’ element with the name ‘date’ is changed.


Although there are some browser inconsistencies with the above code, so programmers usually go with a javascript library such as JQuery or GUI to attach behavior to an element like above.