Using Multiple Selectors with the Behaviour JavaScript Library - Handling multiple elements of a web document
(Page 2 of 4 )
As I stated in the beginning of this article, the first example that I want to show you illustrates the capabilities offered by the Behaviour library to manipulate multiple elements of a given web document. I’m going to demonstrate how a simple JavaScript file can be used to assign a determined behavior to some <h2> elements, which will be wrapped by a general containing DIV.
Having explained what this example will be about, let me first show you the “inline” version of it. This way, you'll see even more clearly the cons of using this old-fashioned approach, and logically the benefits of utilizing the Behaviour package.
Here’s the example of how to attach some JavaScript code to a few <h2> headers:
<!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 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;
}
.redtext{
font: bold 16px Arial, Helvetica, sans-serif;
color: #f00;
}
</style>
</head>
<body>
<h1>Example using inline event handler</h1>
<div id="header"><h2 class="redtext" onclick="this.parentNode.removeChild(this);">This is the header
section</h2></div>
<div id="content"><h2 class="redtext" onclick="this.parentNode.removeChild(this);">This is the content
section</h2></div>
<div id="footer"><h2 class="redtext" onclick="this.parentNode.removeChild(this);">This is the footer
section</h2></div>
</body>
</html>
As you can see, the previous example shows in a clear way how to embed some JavaScript code into the structural markup of a sample web document to remove a few simple <h2> headers when a user clicks on them. The main disadvantage with using this method is that all the JavaScript statements and the respective (X)HTML code are mixed up in the same file. That's something that you should always avoid!
Now that you understand how the above code sample works, let me show you how to achieve the same result using the Behaviour library.
The respective signatures of the files required to get this example working are as shown below, so take a look at them, please:
(definition for “ruleredtext.js” file)
var ruleredtext={
'#header .redtext' : function(element){
element.onclick=function(){
this.parentNode.removeChild(this);
}
},
'#content .redtext' : function(element){
element.onclick=function(){
this.parentNode.removeChild(this);
}
},
'#footer .redtext' : function(element){
element.onclick=function(){
this.parentNode.removeChild(this);
}
}
};
Behaviour.register(ruleredtext);
<!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 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;
}
.redtext{
font: bold 16px Arial, Helvetica, sans-serif;
color: #f00;
}
</style>
<script language="javascript" src="behaviour.js"></script>
<script language="javascript" src="ruleredtext.js"></script>
</head>
<body>
<h1>Example using Behaviour JavaScript Library</h1>
<div id="header"><h2 class="redtext">This is the header
section</h2></div>
<div id="content"><h2 class="redtext">This is the content
section</h2></div>
<div id="footer"><h2 class="redtext">This is the footer
section</h2></div>
</body>
</html>
As you’ll certainly agree, here’s where the Behaviour package really shines! See how easy it is to assign different JavaScript functions to multiple elements of a web page? Take a detailed look at the signature of the “ruleredtext.js” JavaScript file shown previously, and you’ll understand more clearly what I mean.
With reference to the prior example, the Behaviour library lets you quickly define the set of rules that will be applied to different elements of a specified web document by creating an associative array, where its keys are the CSS selectors that will be used with the document in question, and its values are the JavaScript functions that will be called consecutively.
Well, after showing you how to use the Behaviour package to manipulate many elements of a given web page, it’s time to leap forward and study other situations in which the library can be useful. In the following section I’m going to create an illustrative example where the Behaviour package is utilized to handle different items of an unordered (X)HTML list. To learn how this brand new example will be developed, click on the link that appears below and keep reading.
Next: Working with nested elements of a web page >>
More JavaScript Articles
More By Alejandro Gervasio
