StatCounter

Sunday, September 10, 2006

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/

17 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.

R. Rajesh Jeba Anbiah said...

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?

R. Rajesh Jeba Anbiah said...

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.

R. Rajesh Jeba Anbiah said...

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.

R. Rajesh Jeba Anbiah said...

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.

R. Rajesh Jeba Anbiah said...

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.

R. Rajesh Jeba Anbiah said...

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) {

R. Rajesh Jeba Anbiah said...

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)

ron van den branden 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

R. Rajesh Jeba Anbiah said...

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.
123 123 said...
This comment has been removed by a blog administrator.