Introducing the Behaviour JavaScript Library - Applying rules to a different CSS selector
(Page 4 of 4 )
In the previous section I demonstrated how to use the Behaviour package to attach the same function to all the links included in a sample web document. It was, admittedly, a straightforward and painless process.
Now I'd like you to pay attention to the following example. It illustrates how to assign the same JavaScript function to a group of paragraphs. This shows off the flexibility provided by this excellent JavaScript package when it comes to modifying CSS selectors.
That being said, the example in question is as follows:
(definition for "rulespar.js" file)
var rulespar={
'p' : function(element){
element.onclick = function(){
alert('This event handler has been assigned via the
Behaviour library');
}
}
};
Behaviour.register(rulespar);
<!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>Testing Behaviour JavaScript Library</title>
<style type="text/css">
h1{
font: bold 24px Arial, Helvetica, sans-serif;
color: #00f;
}
p{
font: bold 12px Verdana, Arial, Helvetica, sans-serif;
color: #000;
}
</style>
<script language="javascript" src="behaviour.js"></script>
<script language="javascript" src="rulespar.js"></script>
</head>
<body>
<h1>Testing Behaviour JavaScript Library</h1>
<div>
<p>This first paragraph will be attached to an onclick
event handler.</p>
<p>This second paragraph will be attached to an onclick
event handler.</p>
<p>This third paragraph will be attached to an onclick
event handler.</p>
<p>This fourth paragraph will be attached to an onclick
event handler.</p>
</div>
</body>
</html>
In this particular case, I followed the same approach shown with the previous examples. First, I defined the corresponding JavaScript file, which is responsible for attaching a specific function to a predefined CSS selector (in this case, a few paragraphs), and then created the (X)HTML file that includes the aforementioned JavaScript code.
If you're curious about how the previous example works, try it on your own browser and you'll see how an alert box is neatly displayed each time you click on a paragraph.
Wrapping up
That's all for the moment. In this first article of the series I showed you some basic yet instructive examples of how to use the functionality provided by the Behaviour library. In particular, I showed you how it could help you create clean and unobtrusive JavaScript code for working with specific CSS selectors.
However, this is merely the beginning of this journey. In the next part of the series I'll show you how to use the Behaviour package to work with different CSS selectors, such as IDs and classes. You won't want to miss it.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
/ 7 
