Working with IDs and Classes with the Behaviour JavaScript Library - Assigning JavaScript functions by using CSS classes
(Page 3 of 4 )
As you may have guessed, assigning a JavaScript function to a specified web page element via its class attribute is a process that looks very similar to the one performed when utilizing IDs. As I did with all the examples that I developed in the previous section, first I'll show you the "inline" version of the process in question, and then I'll show you the same example using the Behaviour library.
Having said that, here is how to attach an alert box to a paragraph whose class attribute is defined with a value of "largepar." The corresponding code listing 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 using inline event handler</title>
<style type="text/css">
h1{
font: bold 24px Arial, Helvetica, sans-serif;
color: #000;
}
.largepar{
font: bold 20px Arial, Helvetica, sans-serif;
color: #00f;
}
</style>
</head>
<body>
<h1>Example of using inline event handler</h1>
<p class="largepar" onclick="alert('This paragraph has an
inline event handler.')">This paragraph has an inline event
handler.</p>
</body>
</html>
Pretty ugly, isn't it? Now that you saw the bad implementation of an inline handler which has been attached to the previous paragraph, have a look at the following example using the Behaviour library:
(definition of "rulepar.js file)
var rulepar={
'.largepar' : function(element){
element.onclick = function(){
alert('This event handler has been assigned via the
Behaviour library.');
}
}
};
Behaviour.register(rulepar);
<!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 </title>
<style type="text/css">
h1{
font: bold 24px Arial, Helvetica, sans-serif;
color: #000;
}
.largepar{
font: bold 20px Arial, Helvetica, sans-serif;
color: #00f;
}
</style>
<script language="javascript" src="behaviour.js"></script>
<script language="javascript" src="rulepar.js"></script>
</head>
<body>
<h1>Example using Behaviour JavaScript Library</h1>
<p class="largepar">The event handler of this paragraph has been assigned via the Behaviour library.</p>
</body>
</html>
As I said before, assigning a JavaScript function to a particular web page element via its class attribute is really a straightforward process, which can be easily performed using Behavior. And best of all, the respective structural and behavioral layers of the web document remain completely independent from each other at all times.
So far, so good. At this point, you hopefully learned how to attach a single JavaScript function to a particular web page element via its ID or class attribute. Nonetheless, the Behaviour package really starts to shine when you work with parent and child tags, since it's possible to define a rule (or a set of them) that matches any CSS selector, no matter how its associated element is positioned within a given web document.
This concrete case will be examined in the section to come, thus if you want to learn how this will be achieved, please keep reading.
Next: Using IDs and classes together >>
More JavaScript Articles
More By Alejandro Gervasio
/ 2 
