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.
Next: Expanding the application range of the Behavior package >>
More JavaScript Articles
More By Alejandro Gervasio
/ 7 
