Working with IDs and Classes with the Behaviour JavaScript Library - Extending the use of CSS selectors with the Behaviour library
(Page 2 of 4 )
In consonance with the prerequisites that I stated right at the beginning of this article, I'm going to set up a practical example. In this example the Behaviour package is used to attach a custom JavaScript function to a specific CSS selector, in this case using only an ID attribute.
Before you see the pertinent example, first let me show you how a hypothetical (X)HTML file would look, in this case using a few inline handlers associated with some containing DIVs.
This poor implementation of inline handlers could be coded 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 using inline event handler</title>
<style type="text/css">
h1{
font: bold 24px Arial, Helvetica, sans-serif;
color: #000;
}
h2{
font: bold 16px Arial, Helvetica, sans-serif;
color: #00f;
}
#header{
height: 200px;
background: #ffc;
border: 1px solid #999;
}
#content{
height: 400px;
background: #f90;
border: 1px solid #999;
}
#footer{
height: 200px;
background: #ffc;
border: 1px solid #999;
}
</style>
</head>
<body>
<h1>Example of using inline event handler</h1>
<div id="header" onclick="alert('This is the header
section.')"><h2>This is the header section</h2></div>
<div id="content" onclick="alert('This is the content
section.')"><h2>This is the content section</h2></div>
<div id="footer" onclick="alert('This is the footer
section.')"><h2>This is the footer section</h2></div>
</body>
</html>
Definitely, you'll have to agree with me that the above example looks really ugly. It includes three inline JavaScript handlers, which have been attached to the DIVs that I mentioned before.
However, all is not lost here. Below I recreated the same example, but in this case using the Behavior library. Naturally, the first thing to do consists of defining the set of rules that must be applied to a specific CSS selector. Here is the JavaScript file that accomplishes this:
var rulediv={
'#header' : function(element){
element.onclick = function(){
alert('This event handler has been assigned via the
Behaviour library.');
}
}
};
Behaviour.register(rulediv);
As you can see, the above JavaScript file defines a simple rule. This rule states that all the web page elements that have an ID attribute with a value of "header" will be associated to a primitive function, tasked with displaying a basic alert box on the browser.
Now that you know how the previous CSS rule looks, please take a look the signature of the following (X)HTML file, which uses the JavaScript snippet that was defined earlier. Here is the corresponding definition:
<!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 using Behaviour JavaScript Library</title>
<style type="text/css">
h1{
font: bold 24px Arial, Helvetica, sans-serif;
color: #000;
}
h2{
font: bold 16px Arial, Helvetica, sans-serif;
color: #00f;
}
#header{
height: 200px;
background: #ffc;
border: 1px solid #999;
}
#content{
height: 400px;
background: #f90;
border: 1px solid #999;
}
#footer{
height: 200px;
background: #ffc;
border: 1px solid #999;
}
</style>
<script language="javascript" src="behaviour.js"></script>
<script language="javascript" src="ruledivs.js"></script>
</head>
<body>
<h1>Example using Behaviour JavaScript Library</h1>
<div id="header"><h2>This is the header section</h2></div>
<div id="content"><h2>This is the content section</h2></div>
<div id="footer"><h2>This is the footer section</h2></div>
</body>
</html>
Wasn't the previous file tighter and easier to code? Definitely it was. Of course, in this case, a basic JavaScript function is assigned to the first DIV, which is identified as "header," but the difference to spot here is that both the JavaScript code and the structural markup reside in different files.
Okay, at this stage you already saw how to attach a JavaScript function to a specified CSS selector, using its ID attribute The next step to take consists of demonstrating how a similar process can be performed using CSS classes. Sounds pretty interesting, right?
As usual, to see how this assignment of functions can be achieved by using the Behaviour package, please jump into the next section and keep reading. I'll be there, waiting for you.
Next: Assigning JavaScript functions by using CSS classes >>
More JavaScript Articles
More By Alejandro Gervasio
/ 2 
