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:
document.getElementsByName(“date”)[0].
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.