I just happened upon event:Selectors. It’s very similar to Behaviour.js (the author’s spelling, not mine) in most respects, though its much smaller (72 lines / ~2k) and has some nice added functionality using Prototype shortcuts (Behaviour is stand-alone and duplicates a lot of Prototype stuff and is, therefore, larger).
Basic usage:
var Rules = {
'#icons a:mouseover': function(element) {
var app = element.id;
new Effect.BlindDown(app + '-content', {queue: 'end', duration: 0.2});
},
'#icons a:mouseout': function(element) {
var app = element.id;
new Effect.BlindUp(app + '-content', {queue: 'end', duration: 0.2});
}
}
Now, this alone is nice, but nothing exceptional. You could do the same thing with prototype thusly:
Event.observe(window,"load",function() {
$$('#icons a').each(function(tag) {
Event.observe(tag,'mouseover', function() {
var app = tag.id;
new Effect....
});
});
});
Ok, so it’s definitely longer to do without it, but not terribly so. But what really gets me excited is this:
'#footer:loaded': function(element) {
element.setStyle({backgroundColor: '#ccc'});
}
This will apply the code to the element once it’s loaded. That’s just awesome. That’s just awesome times five. Wait, it gets better: it will also apply all your rules to your Ajax responses, too (if you want it to). This means when you bring in a chunk of html into the DOM you don’t have to set up all your events on it again.
It has a few other nice touches (you can, for instance, apply these events to more than one selector, for instance). Check it out.
