Home ›

At the Forge - Unobtrusive JavaScript

Issue 174

From Issue #174
October 2008

Oct 01, 2008  By Reuven M. Lerner
 in
Remove JavaScript event handlers from HTML files using Prototype and Lowpro.

Listing 2. test-2.html, with Event Handlers Defined in <script> Tags

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
         "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
   <title>Unobtrusive JavaScript</title>

 </head>
 <body>
   <h1>Unobtrusive JavaScript</h1>
   <script text="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/prototype/
↪1.6.0.2/prototype.js"></script>

   <p>A paragraph of text.</p>

   <p>A <a href="http://www.nytimes.com" id="hyperlink">hyperlink</a>
     to The New York Times.</p>

   <form method="POST" action="/action" id="the_form">
     <input type="text" name="text_field" id="text_field" />
     <input type="submit" value="Submit the form" id="submit_button" />
   </form>

 </body>

 <script>
   function show_x_and_y(event) {
       alert(event.pageX + ", " + event.pageY); return false;
   }

   $('hyperlink').onclick = show_x_and_y;

   $('hyperlink').onmouseover =
               function() { $('the_form').hide(); }
   $('hyperlink').onmouseout =
               function() { $('the_form').show(); }


 </script>
</html>
</programlisting>

Assigning events in this way has some advantages over using the onclick and related attribute-based event handlers. It lets us define all of our event handlers in a single place—typically at the end of the HTML file. Thus, we have some separation between our HTML and JavaScript.

But, what if we want to go one step further, putting all our JavaScript into a separate file? Listing 3 shows a new version of our HTML file, now called test-3.html. Instead of having the JavaScript at the bottom of the page, I put it in a separate file, called atf-events.js (Listing 4). However, if you try to load this file, you quickly will discover that it doesn't work. We get a JavaScript error upon loading the file (clearly evident and readable if you're using the wonderful Firebug debugger for Firefox), telling us that $('hyperlink') is null.

Listing 3. test-3.html, All JavaScript Removed and Placed in atf-events.js

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
         "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
   <title>Unobtrusive JavaScript</title>

 </head>
 <body>
   <h1>Unobtrusive JavaScript</h1>
   <script text="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/prototype/
↪1.6.0.2/prototype.js"></script>
   <script text="text/javascript" src="atf-events.js"></script>

   <p>A paragraph of text.</p>

   <p>A <a href="http://www.nytimes.com" id="hyperlink">hyperlink</a>
     to The New York Times.</p>

   <form method="POST" action="/action" id="the_form">
     <input type="text" name="text_field" id="text_field" />
     <input type="submit" value="Submit the form" id="submit_button" />
   </form>

 </body>
</html>

Listing 4. atf-events.js, (broken) JavaScript Code for test-3.html

function show_x_and_y(event) {
 alert(event.pageX + ", " + event.pageY); return false;
}

$('hyperlink').onclick = show_x_and_y;
$('hyperlink').onmouseover = function() { $('the_form').hide(); }
$('hyperlink').onmouseout = function() { $('the_form').show(); }

How can this be? If you look through Listing 3, you still will see an HTML element with an ID of hyperlink. And, we definitely have included the Prototype library, so $() should work. How can it be, then, that $('hyperlink') returns null?

The answer is subtle, but well known to JavaScript programmers: $('hyperlink') is available only after the HTML element with an ID of hyperlink has been loaded. Because our JavaScript file was loaded (in the <head> of the document) before the hyperlink element was defined, JavaScript threw us an error.

One solution to this problem is to load our JavaScript at the end of the file, right before the closing </body> tag. Another possibility is to define all of our event handlers in a function that itself is executed only after the entire document is loaded. In other words, we define a function (set_event_handlers) that defines all of our event handlers. Then, we attach this function to the window.onload event, which executes only after the entire document has been loaded. The code, shown in Listing 5, is exactly the same as Listing 4, except the functionality is wrapped in the set_event_handlers function, which is invoked based on an event.

______________________

Comments

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

So interresting...

Arimbourg's picture
Submitted by Arimbourg (not verified) on Sat, 02/07/2009 - 07:40.

Thanks for this article. Clear and so usefull...

Webcast
More Resources
How to Build an Optimal Hadoop Cluster to Store and Maintain Unlimited Amounts of Data Using Microservers

Realizing the promise of Apache® Hadoop® requires the effective deployment of compute, memory, storage and networking to achieve optimal results. With its flexibility and multitude of options, it is easy to over or under provision the server infrastructure, resulting in poor performance and high TCO. Join us for an in depth, technical discussion with industry experts from leading Hadoop and server companies who will provide insights into the key considerations for designing and deploying an optimal Hadoop cluster.

Learn More

Sponsored by AMD

White Paper
More Resources
Red Hat White Paper: Using an Open Source Framework to Catch the Bad Guy

Built-in forensics, incident response, and security with Red Hat Enterprise Linux 6

Every security policy provides guidance and requirements for ensuring adequate protection of information and data, as well as high-level technical and administrative security requirements for a system in a given environment. Traditionally, providing security for a system focuses on the confidentiality of the information on it. However, protecting the data integrity and system and data availability is just as important. For example, when processing United States intelligence information, there are three attributes that require protection: confidentiality, integrity, and availability.

Learn more about catching the bad guy in this free white paper.

Learn More

Sponsored by DLT Solutions