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 - Expanding the application range of the Behavior package (Page 3 of 4 )
In the section that you just read, I provided you with a clear example of how to use the Behaviour library to assign a simple "onclick" handler to one link, which was included into a sample web document. Therefore, let me show you how easy it is to apply the same handler to multiple web page links by utilizing the functionality offered by Behaviour.
Now, suppose that you've created (because of laziness or ignorance) the following web document:
<!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 using multiple inline event handlers</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> </head> <body> <h1>Example of assigning multiple inline event handlers</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 using inline event handler.</a></p> <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 using inline event handler.</a></p> <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 using inline event handler.</a></p> <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 using inline event handler.</a></p> <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 using inline event handler.</a></p> </body> </html>
As you can see, the previous web page includes a few annoying JavaScript inline handlers, which have been attached to a group of links. Indeed, this approach makes the whole source code really messy, but fortunately the problem can be quickly fixed by using the Behaviour package.
As I did previously, I'm going to create the JavaScript file that assigns an "onclick" handler to all the links included into the respective web page. The file looks like this:
var rulelink={ 'a' : function(element){ element.onclick = function(){ alert('This event handler has been assigned via the Behaviour library.'); } } }; Behaviour.register(rulelink);
And here is the corresponding (X)HTML file that loads the JavaScript file I defined a few lines before:
<!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 handlers 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> <p><a href="#">This link element opens up an alert box via Behavior JavaScript Library.</a></p> <p><a href="#">This link element opens up an alert box via Behavior JavaScript Library.</a></p> <p><a href="#">This link element opens up an alert box via Behavior JavaScript Library.</a></p> <p><a href="#">This link element opens up an alert box via Behavior JavaScript Library.</a></p> </body> </html>
If you test the previous file on your browser, then you'll see that each of the links included into the web page will open up an alert box. This is similar to the erroneous example that I showed in the beginning of this section. However, in this case, both the structural markup and JavaScript code reside on different layers.
All right, at this point you hopefully learned how to use the Behavior library to assign a simple "onclick" handler to multiple links coded on the same web page. Therefore, assuming that you want to see even more useful examples of how to take advantage of this excellent library, in the following section I'll show you how to use the package in conjunction with a different CSS selector.
Want to learn how this will be achieved? Go ahead and read the next few lines.
JavaScript 
/ 9 
Working with IDs and Classes with the Behaviour JavaScript Library
