Separating the layers of your web pages makes them more compact and easier to maintain. The Behaviour JavaScript library makes it easy for even beginning coders to do this, and helps seasoned developers save time when building web sites. This article is the first in a three-part series that explains the features of this library.
Introducing the Behaviour JavaScript Library - A basic example (Page 2 of 4 )
To demonstrate how the Behaviour library can be used to remove completely ugly inline JavaScript event handlers from the structural markup of a given web document, let me show you a couple of basic yet educational examples.
Please take a look at the first example. It shows how to attach an alert box to a simple paragraph element via an inline "onclick" event handler. The code sample is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Example of inline event handler</title> </head> <body> <h1>Example of inline event handler</h1> <p><a href="#" onclick="alert('This alert box has been badly generated by an inline event handler.')">This link element opens up an alert box</a></p> </body> </html>
Pretty bad, right? This approach should always be avoided when coding your web documents! Now that you have seen the incorrect way to assign the previous event handler, let me show you how to use the Behaviour package to recreate the same example with clean, unobtrusive JavaScript code.
First I'll create the following independent JavaScript file. In this file I'll configure which CSS selectors will be attached to the inline "onclick" handler that you learned before. The signature of this file is as follows:
var rulelink={ 'a' : function(element){ element.onclick = function(){ alert('This event handler has been assigned via the Behaviour library.'); } } }; Behaviour.register(rulelink);
As shown above, I first defined an associative array, in this case called "rulelink." The key of its unique element is the CSS selector that will be used with the event handler, and the value consists of a function that will be called when the respective event is triggered.
Finally, the rule in question is applied to the selector via the handy "register()" method. Quite simple, isn't it?
All right, having defined the previous JavaScript file, all I have to do here is include it into the corresponding web document, as indicated below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Example of assigning event handler using Behavior JavaScript Library</title> <style type="text/css"> h1{ font: bold 24px Arial, Helvetica, sans-serif; color: #000; } a:link,a:visited{ font: bold 12px Verdana, Arial, Helvetica, sans-serif; color: #00f; text-decoration: none; } a:hover{ color: #f00; text-decoration: underline; } </style> <script language="javascript" src="behaviour.js"></script> <script language="javascript" src="rulelink.js"></script> </head> <body> <h1>Example of assigning event handler using Behavior JavaScript Library</h1> <p><a href="#">This link element opens up an alert box via Behavior JavaScript Library.</a></p> </body> </html>
As you can see, the previous (X)HTML file first loads the source file that corresponds to the Behaviour library, and then includes the JavaScript file that I created a few lines above to assign an "onclick" event handler to the link present in the web page.
Hopefully, after seeing how the Behaviour package can be used to assign a specific function to a predefined CSS selector, you'll realize the potential offered by this library. It's possible to quickly create web pages that completely separate their structural layer from the respective behavior. That's coding unobtrusive JavaScript indeed!
Okay, at this point I'm pretty sure that you learned the methodology required for using the Behaviour library. So let's move forward and continue learning more practical examples that will illustrate how to get the most out of this useful package.
To see how these examples will be developed, click on the link below and keep reading.
JavaScript 
/ 9 
Working with IDs and Classes with the Behaviour JavaScript Library
