Skip to main content

BehaviorS.js - An alternative to Behaviour.js, event:Selectors and Low Pro libs for unobtrusive JavaScript programming

BehaviorS.js yet another unobtrusive JavaScript library similar to Behaviour.js and event:Selectors but in implementation uses hash based lookup without extending elements; so presumably it should be faster than the rest. The original script and idea was by JLof; I extended it for DOMContentLoaded support, optimized a bit to avoid scanning of more depths, and added new rules support.

I wanted to document the plug a long time and just got time to do it.

For the time being BehaviorS.js is available here

Update (2006-09-11): Coralized the link to BehaviorS.js so as to save the load on free webpage

Update (2006-09-27): If the coralized link to BehaviorS.js doesn't work, use


Anonymous said…
A bit different than the other approaches but so far so good.

I like your more abbreviated approach. I really don't need super complex filtering for elements or to dig deep into the DOM to attach events.

I always felt like the other approaches might be a bit overcomplex in their ability to handle some pretty rare scenarios. The flexibility seemed to have a performance impact and I like how you can adjust your flexibility with a corresponding impact on performance.

I need to do some more testing but, again, so far so good.
Anonymous: Thanks for your kind words. All the credits go to JLof for sharing his wonderful piece of code.
Anonymous said…

Very nice library. I have just started looking at it and I see where
it's possible to do a lot of things. I'm not sure if it will be able to
handle onblur and onfocus events but it's a great start.

Does the lib handle things like onchange on keypress? Can I do things
like "#myid ul li:click" selections?

Yes, onblur and onfocus events capturing is possible.

Selection such as "#myid ul li:click" isn't possible. It should rather be "#myid:click" or "LI:click" (tag should be in upper case) or "UL:click"

But, it's possible to extend your own syntax by touching the source.
Anonymous said…
Thanks Rajesh!

As soon as I get sometime I'll check out the source and see what I can do.

This is truely a great library.

Thanks for your kind words. If you improve it, kindly inform me so that the improvements can be incorporated. Thanks.
Anonymous said…
The links don't work.
Anonymous: The link is coralized so as to avoid the load on the free webpage (BehaviorS.js page gets quite traffic lately).

If that coralized link doesn't work, you may have to use the direct link that I updated under "Update (2006-09-27)".
Dan said…
Very fast, but a couple of problems:

- Can't stop an event handler's default behavior; preventDefault() won't work in IE (of course) and returning false doesn't seem to work

- IE doesn't seem to be picking up onsubmit behaviors

So far, so good, but those limitations make it unworkable for me right now.

1. You may need to use cross-browser function to stop event propagation. Here is the one from Prototype:

function stopEvent(event) {
if (event.preventDefault) {
} else {
event.returnValue = false;
event.cancelBubble = true;

2. Just noted that IE doesn't support global (document.body.attachEvent("onsubmit",...)) event handler for forms. Thanks for reporting it. I do have a patch now (locally); but still googling to see if there is any better out there. If you have any, kindly ping me. Thanks.

This is the update to my previous reply.

IE seems to require attaching events to particular element so as the onsubmit, onblur, onfocus (and any other untried events) events will work.

The only patch I tried is extending elements individually--which is obviously defeating the purpose of this library; and hence gave up that patch. And, I'm still thinking of better way to handle this.

By the way, for the onsubmit, IE seems to work on 'FORM:click'.
Anonymous said…
Good library, good documentation - thanks! Faced errors in digDepth in IE with className is null error. Worked around it with some checks in the handle function. Also, a majority of selectors would probably apply, in the web 2.0 era, to specific elements by id instead of classname or type.

for (var i = 0, found = false;
!found && nd && i < BehaviorS.digDepth;
++i, nd = nd.parentNode) {
found = BehaviorS.invoke("#" + + ":" + e.type, nd, e) || found;
if (!found) {
found = BehaviorS.invoke(nd.nodeName + ":" + e.type, nd, e) || found;
if (!found && nd.className != null) {

Thanks for the kind words and the patch. I'm still looking how to reproduce the bug you're reporting. BTW, if you could tell me your real name, I may credit the patch to your name.

I have also planned to do few minor improvements by next weekend.

(Apologies for the late reply; been on vacation and then got busy for sometime)
ron van den branden said…

I came across your lib while browsing the behaviour.js list for solutions to performance problems when loading large pages. First tests look very promising (from my 'JS lib user' perspective). With your stopEvent patch, it seems to do all I want, in no time!

Any notes on browser + platform compatibility? So far, behaviorS seems to work from IE5 and Opera7 onwards, and recent FF, all on Windows XP. Are there any figures for other browsers (Mac?).

Kind regards,

Ron Van den Branden
Ron Van den Branden:

Thanks for your kind words. But, I must confess that I haven't tested in many platforms and I hope it will work--thanks for your information on Opera.

I tested in FF1.5, it works for all events. Also tested in IE6, it works for many events except blur, focus and submit (Please check my reply above.)
Eugene said…
This comment has been removed by a blog administrator.
Anonymous said…
This comment has been removed by a blog administrator.

Popular posts from this blog

Using Sodexo Meal Pass Card in - How-to

How to Use Sodexo Meal Pass Card in Sodexo started to issue Smart Card similar to Credit Card--instead of their usual paper based vouchers.

I was using Sodexo vouchers for longtime, but it was a big letdown when I can't get some of my unused vouchers renewed. And so, I was somehow happy with their new Meal Pass Card. But, again, it was a big letdown as I can't use it with BigBasket--where I usually use most of my meal coupon vouchers.
SMS message from Sodexo on December 20, 2017 1:18 PM came as a big surprise, as I was waiting for this for longtime:
Great News! Pay with your Sodexo Meal Card for food items ordered from Big Basket. Choose Sodexo in the payment section & pay on delivery.

And so, this month, I tried to use my Sodexo Meal Pass Card in BigBasket.

BigBasket website had not much information; I thought that I have to swipe my Meal Pass Card. Delivery person also didn't have much information; initially he was rejecting my Card! I tried to contact …

Who is behind (WikiLeaks of India)?

Ever since I've given my Humble Award to Savukku, I've started getting hits about the person behind Savukku website (Julian Assange of Savukku?). In fact, I wasn't aware of the identity of the person behind the Savukku and so I collected the following information.

Previous job
Staff of directorate of vigilance and anti-corruption (DVAC). He was suspended and arrested for alleged leaking of taped conversation
Marital status
Single, living with mother (Heleena told me that she read somewhere about this)
Lifted from shows he's arrested on alleged road rage

Related links

Blogger whips up a following
City blogger held for road rage
நிர்வாண அழகு (வலைச்சரம் ஜோதிஜி 5வது நாள்)

Converting PSD with PHP/ImageMagick

After seeing feature rich options in Imagick PECL extension at Mikko Koppanen's (the author) website and also impressed with ImageMagick's features, I have decided to use it for the PSD to XHTML conversion website that I'm architecting and managing.

Since, the team wants programming help for converting PSD images, I have tried it (documentation is sparse on PSD handling)

Converting PSD to PNG/JPEG/etc
Note that, flattenImages() is needed for layered/multi-page PSD file.

$im = new Imagick('test.psd');

Extracting PSD layers
One by one

$im = new Imagick('test.psd');
for ($i = 0, $num_layers = $im->getNumberImages(); $i < $num_layers; ++$i) {
$im->writeImage('layer' . $i . '.png');

Note that, there is a better version below

In a single call with write…