Standards Based Development

Standards Based Development

unobtrusive JavaScript

Click the button and a clickHandler function will be called. Click the box that opens and another handler will be called.

Implementation Files

  1. button.html (in HTML5 format).

    <!DOCTYPE html>
    <html lang='en'>
    <head>
    <title>unobtrusive js</title>
    <meta charset=utf-8" />
    <script src="../js/unobtrusive-demo.js"></script>
    </head>
    <body>
    <h2>Unobtrusive JavaScript Demo</h2>
    <button id='bttnHello'>Say Hello</button>
    <p id='pMsg'></p>
    </body>
    </html>

  2. unobtrusive.js (3-Step Version)

    /* File: site/js/unobtrusive-demo.js
   Outline of steps to follow for unobtrusive JavaScript
   
   Can be easily modified to handle onmouseover, onmouseout, etc.
 */

//1. Define event handler
var handleClick = function(){
   //response when button is clicked
   document.getElementById('pMsg').innerHTML = 'Hello, World!'
}

//2. Define the onload handler
var handleLoad = function(n){
   //Attach the onclick handler defined in step 1
   document.getElementById('bttnHello').onclick = handleClick;
}

//3. Register the onload handler
window.onload = handleLoad;
    unobtrusive.js (2-Step Version)

    //1. Define event handler
var handleClick = function(){
   //response when button is clicked
   document.getElementById('pMsg').innerHTML = 'Hello, World!'
}

//2. Define the onload handler 
window.onload =  function(n){
   //Attach the onclick handler defined in step 1
   document.getElementById('bttnHello').onclick = handleClick;
};
    unobtrusive.js (2-Step Version using Prototype)

    //1. Define event handler
var handleClick = function(){
   //response when button is clicked
   $('pMsg').update('Hello, World!');     //Prototype uses update() for innerHTML
}

//2. Define the onload handler 
window.onload =  function(n){
   //Attach the onclick handler defined in step 1
   $('bttnHello').observe('click', handleClick);
}
    unobtrusive.js (3-Step Version using jQuery)

    //1. Define event handler
var clickHandler = function(){ 
   $('pMsg').html('Hello, World!'); 
}

//2. Define a function to register the onclick handler
    
var registerHandlers = function(){
   $('#bttnHello').click(clickHandler);
}

//3. Call registerHandler after the page loads
$(document).ready(registerHandlers);
    unobtrusive.js (2-Step Version using jQuery)

    //1. Define event handler
var clickHandler = function(){ 
   $('pMsg').html('Hello, World!'); 
}

//2. Attach clickHandler after the page loads
$(document).ready(function(){
   $('#bttnHello').click(clickHandler);
});

The Keyword this in Unobtrusive JavaScript

When event handlers are attached in the unobtrusive style, the handler function can access the element to which it is attached by using the this keyword.