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 brinkster.com webpage

Update (2006-09-27): If the coralized link to BehaviorS.js doesn't work, use http://www21.brinkster.com/guideme/BehaviorS/

Comments

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…
Hi,

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?
Anonymous:

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.
Anonymous:

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)".
Anonymous 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.
Dan:

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) {
event.preventDefault();
event.stopPropagation();
} 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.
Dan:

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("#" + nd.id + ":" + e.type, nd, e) || found;
if (!found) {
found = BehaviorS.invoke(nd.nodeName + ":" + e.type, nd, e) || found;
}
if (!found && nd.className != null) {
Anonymous:

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)
Anonymous said…
Hi,

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

Problems with CakePHP - follow-up

Some people have responded including the Datepicker fame Marc Grabanski . So, this follow-up... First of all, I was not ranting nor complaining; I've just blogged/documented my experience. The common problem most of the people pointed out are that it scales for addons.mozilla.com. Those who have accessed their source code can understand that they've done lot of things and also the site is not database-intensive. You should really create a real database-intensive website to understand what I mean. The other point that been pointed out is about open source and community. Lot of people may not be knowing that it's 2 people pushing it and don't want others to be credited . The generic model or dynamic model idea was originally been from grigri and Marcel . It's hard to be called as open source as only few and sycophants are driving it's direction (I'm not talking about svn access) So, here are my humble checklist before you start shouting at me Did you read a

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. <?php $im = new Imagick('test.psd'); $im->flattenImages(); $im->setImageFormat('png'); $im->writeImage('test.png'); ?> Extracting PSD layers One by one <?php $im = new Imagick('test.psd'); $im->setImageFormat('png'); for ($i = 0, $num_layers = $im->getNumberImages(); $i < $num_layers; ++$i) { $im->setImageIndex($i); $im->writeImage('layer' . $i . '.png'); } ?> Note that, there is a better version below In