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
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.
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.
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.
If that coralized link doesn't work, you may have to use the direct link that I updated under "Update (2006-09-27)".
- 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) {
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.
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'.
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) {
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)
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
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.)