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.
Next: Applying rules to a different CSS selector >>
More JavaScript Articles
More By Alejandro Gervasio
/ 7 
