The Netlobo logo - a Nevada desert landscape

Unobtrusive Javascript made easy

A guide showing how to add unobtrusive javascript to multiple elements

Published Jul 27, 2005 by lobo235

The idea behind unobtrusive javascript is similar to CSS; You don't want to bloat your HTML with anything that doesn't need to be there. This makes your HTML page easier to update and maintain. To use unobtrusive javascript you must put your javascript in seperate files or in the <head> section of your HTML page. The hard part then is getting your javascript to interact with the elements you wish to use. There are many ways to do this and all of them have their advantages and disadvantages. The easiest way to do it is to apply your javascript to an element with a certain id using getElementByID or some other method that allows you to find elements in your page based on their id. (For a cross-browser alternative to getElementById see my article about Using Javascript to get an Element by ID.) But by using the id to add javascript to your elements you are limited to applying the behavior to one element at a time. My preferred method is to apply javascript behavior using the class attribute of the elements. For example, consider the following javascript function that will apply a javascript behavior to any elements of the desired type and class that will be triggered by the desired event.

function setHandler( tagType, clsName, eventType, func )
{
    elements = document.getElementsByTagName( tagType );
    for( var t = 0; t < elements.length; t++ )
    {
        if( elements[t].className.indexOf( clsName ) >= 0 )
        {
            var code = "elements[t]." + eventType + " = " + func;
            eval( code );
        }
    }
}

Now, let's create a function called initpage() that will be called when the page loads. In that function we will use the setHandler() function to apply behaviors to some elements in our page.

function initpage( )
{
    setHandler( 'tr', 'toggle', 'onclick', 'toggleColor' );
    setHandler( 'span', 'heading', 'onmouseover', 'toggleColor' );
    setHandler( 'span', 'heading', 'onmouseout', 'toggleColor' );
}

Lets use the following HTML in our document to test it out.

<span class="heading bold larger">Excercise</span>
<span class="heading bold larger">Diet</span>
<span class="heading bold larger">Sleep</span>
<table cellspacing="0" cellpadding="5">
    <tbody>
        <tr>
            <th>Date</th><th>Duration</th><th>Activity</th>
        </tr>
        <tr class="toggle handcursor">
            <td>2005-07-25</td>
            <td>1</td>
            <td>Bicycling</td>
        </tr>
        <tr class="toggle handcursor">
            <td>2005-07-26</td>
            <td>.5</td>
            <td>Jogging</td>
        </tr>
        <tr class="toggle handcursor">
            <td>2005-07-27</td>
            <td>2</td>
            <td>Ping Pong</td>
        </tr>
    </tbody>
</table>

Please note that "bold", "larger" and "handcursor" are additional classes used to make the example look pretty on my site. You do not need those classes. Also, as you can see, the setHandler() function still works if you have multiple classes for an element. The end result should look like this:

Excercise Diet Sleep
DateDurationActivity
2005-07-25 1 Bicycling
2005-07-26 .5 Jogging
2005-07-27 2 Ping Pong

If you hover over the words "Excercise", "Diet", or "Sleep" you will see that the background color changes to yellow. Also, try clicking on a table row above to see the background color get toggled to yellow. In order to make this work of course I needed a toggleColor function which I happened to have already (see my article titled Toggle Background Color using Javascript). Please note that the toggleBgColor() function from my other article had to be modified slightly in order to work using this unobtrusive javascript method. You should now know enough about unobtrusive javascript to be dangerous. Please let me know if you have any problems, suggestions, or praises regarding this article.

0 comments for this article.

del.icio.us logo add this article to del.icio.us! Other great Web Development and Programming articles on Netlobo.com:
Applying Object Oriented Programming to PHP
Making AJAX Easier
Fade the Background Color of an Element using Javascript