Published by Ben Nolan, June 2005.
→ See zoomin.co.nz for an example of using Behaviour in a live application ←
AJAX (asynchronous javascript and xml) has been getting a lot of press lately. It is seen as a way to add desktop-application functionality to html pages. Things like Drag and drop, Fluid animations and Dynamic page updates.
It's great to see public uptake of these technologies - but it worries me to see the influx of <SCRIPT> tags and onclick attributes into webpages.
For example, check out these html snippets from two well-known AJAX-enabled sites.
<span onmouseover="notesBlock.hoverBegin(128699)"
onmouseout="notesBlock.hoverEnd(128699, true)">
<a class="trashcan" href="#"
onclick="if (confirm('Are you sure?')) {
new Ajax.Updater('notes',
'/page/2326/notes/destroy/128699', {
<div id="image_16209134_normal">
<script language="Javascript">
photo_hash['16209134'] = new Object();
photo_hash['16209134'].title = '2am on Saturday';
</script>
<h4 id="title_div16209134"
style="margin-bottom: 0px; margin-top: 0px;">
2am on Saturday
</h4>
<script type="text/javascript">initPhotosUserPageTitle_div('16209134');</script>
After all the work of WASP and others to promote clean markup, valid pages and graceful degradataion via css - it sucks that we're going back to tag soup days by throwing javascript tags into our html.
The better way to do javascript is to do it unobtrusively. PPK and Simon Willison have been recommending this approach for ages. And it's definitely the way to go. The only problem is that it's a bit of a pain in the ass.
That's why I came up with Behaviour - my solution to unobtrusive javascript behaviours.
Behaviour lets you use CSS selectors to specify elements to add javascript events to. This means that instead of writing:
<li> <a onclick="this.parentNode.removeChild(this)" href="#"> Click me to delete me </a> </li>
You can use:
<ul id="example"> <li> <a href="/someurl">Click me to delete me</a> </li> </ul>
And then use css selectors to select that <a> element and add javascript functions to it.
var myrules = {
'#example li' : function(el){
el.onclick = function(){
this.parentNode.removeChild(this);
}
}
};
Behaviour.register(myrules);
Using the libraries from script.aculo.us.
Behaviour.js - version 1.1 - Copyright (c) Ben Nolan and Simon Willison.
BSD Licensed.
See the Behaviour Google Group for the support community.
Include the behaviour.js file via a script tag at the top of your page. Create your javascript behaviours in a seperate js file and include them via another script tag.
The format of the rule definitions is like so:
var myrules = {
'b.someclass' : function(element){
element.onclick = function(){
alert(this.innerHTML);
}
},
'#someid u' : function(element){
element.onmouseover = function(){
this.innerHTML = "BLAH!";
}
}
};
Behaviour.register(myrules);
Your rules are defined as an associative array of functions. The key to each element of the array is the selector (marked in red above), the value of each element is a function.
Once your webpage has loaded, the Behaviour library selects all elements that match each selector. It then calls your function, and passes your function the element to act upon.
So - to add an onclick event to every list item <li> in a page - you would write something like this:
var myrules = {
'li' : function(element){
element.onclick = function(){
// Your onclick event goes here - eg;
// load a page - do an AJAX etc.;
}
}
};
Behaviour.register(myrules);
You can call Behaviour.apply() from your scripts to re-apply the rules to any new elements.
I'm a Director at Projectx Technology - we're building better local search software.
My personal weblog is at bennolan.com.