Collaborative Project: Event Handler Abstraction

[Algorithm]

Ok, here's the deal:

I've begun to develop an object that abstracts the process of capturing keyboard events, so that you don't have to worry about cross-browser difficulties or Unicode conversions. However, I've hit some snags that I can't seem to find answers for.

Now, my first thought was to ask the gurus here about each snag as I came across it, but if I did that, we'd be here all day and not much progress would be made. Instead, I've decided to share what I already have, so that anyone who is willing can join in and help make this object as robust as possible.

Yeah, I know, it's kinda silly to pronounce a js snippet to be open-source, but that's what I'm doing.

Here's the code that I have right now. I'm fairly confident that it all works as it should in most browsers. Feel free to prove me wrong.
// keyboard.js

var Keyboard = {}

Keyboard.backsp = String.fromCharCode(8);
Keyboard.del = String.fromCharCode(127);
Keyboard.enter = String.fromCharCode(13);
Keyboard.esc = String.fromCharCode(27);
Keyboard.tab = String.fromCharCode(9);

Keyboard.getKeyPress = function(e){
if(Keyboard.handler) {
var theKey;
if(!document.all) {
theKey = e.which;
} else {
theKey = event.keyCode;
}
return Keyboard.handler(String.fromCharCode(theKey));
}
}

if(!document.all) { document.captureEvents(Event.KEYPRESS); }
document.onkeypress = Keyboard.getKeyPress;

Once the code is in place, all one has to do is assign a function to Keyboard.handler that accepts a single-character argument.

My initial idea was to have this handle all three keyboard events, but keypress is the only one straightforward enough for me to handle single-handedly. Keydown and keyup don't seem to return the same kind of values, and rely on whether other keys are depressed, and so on. I know how to check for that sort of stuff in IE, but what about Mozilla? Or NN? Or Opera? (Yeah, I know, fat chance.) Cynicism aside, I'd like this to be able to work in any JS1.2-compliant browser.

I think that's about it. Any takers?

[Alekz]

Hi,
I'm busy now, so I wont be able to assist, but just a fast thought...

do not explicitely assign the event handler to the document object - think for the rest of code... leave this as object property instead - something as attachedTo ... If I want to capture keypresses for two separate DIV's with two separate event handlers, Your object will suppress my handlers... especially for NN4, because You capture the event, but don't routeEvent it to the next registered handler... You dont even check for other registered handlers on this event in order to call them after Your code is executed...

Alex

[Algorithm]

That's a good point, and one I hadn't considered.

Here's a just-as-quick thought about that: If we added a method called Keyboard.addHandler that takes a HTML element and a function as arguments, could that solve the problem? Or do we need to assign individual handlers before the global?

I'm wading deep into unknown territory here. Can anyone shine some light on this?

[Alekz]

Hi,
Probably both...
Something like:
Keyboard.addHandler(oElement,fHandler){
if(oElement.onkeypress)
this.handler = function(){
oElement.onkeypress();
fHandler();
}
else
this.handler = function(){
fHandler();
}
}

Not syntactically right and not crossbrowser... just the idea...

Alex

[Algorithm]

Come now, I know at least some of you would be interested in this sort of thing. Did I post this in the wrong forum, perhaps?

[mordred]

Not at all, you're definitely in the right forum. And making JavaScript code opensource is not a silly idea - there would be otherwise still copyright/license issues.

Unfortunately, I haven't got that much time to reply right now, but your project looks good sofar. If a multi-browser API evolves from it, you can put me on the supporters list. Though I have to press one issue first: Have you looked into the usage of Mozillas (w3c's) addEventHandler() function? It is the most practical and precise way to handle events I've encountered yet. It also manages the problem Alekz described nicely. Look here for an introduction:

http://www.mozilla.org/docs/dom/domref/dom_el_ref31.html#1028304

For me your project should really care about Mozilla support, since this is currently the most standard confirming browser.
So much for now. Later maybe more.

[Algorithm]

I do care about standards, but for this sort of project the real difficulty will lie in getting it to conform with browsers that are not so standard. That's a good link and I'll look into it, but I want to focus on methods that will work for everything.

Not to say that this sort of thing isn't helpful; it is -- but if the same sort of thing can't be done in other browsers (even if it takes twenty lines of code to do it), then it wouldn't be a good thing to include.

Of course, I could be talking from my posterior on this one. Any thoughts?

[Alekz]

Hi,
That's another discussion... the standarts...
Hey, Whammy, what will happen if in the same time I write letters to browser creators, I loose projects because some silly client does not care about ECMA, it just wants things to work with Netscape 4+ and IE4+?
Well, standarts are a good thing, but they will simply transform crossbrowser issues to crossversion ones... And if I write a letter to Netscape and tell them that there's significant differences between minor versions of Netscape 6, damned even mouse buttons have different numbers in 6.0 and 6.1, what will this change? The browser is on the market already and I'll have to wait a couple of years until it gets old enough. In this time, I'll have to write code for this browser and support it even if it's buggy and does not compy to standarts. Even if I wait enough time... standarts are evolving and I'll allways be in the same situation dealing with different browser versions.
So, in my opinion the solution is a cross-browser/version API which should encapsulate these issues and evolves each time the standarts evolve - probably it will have to change almost on each new browser version release, but... at least the rest of the code will work...

Alex

[mordred]

Arghl, I shouldn't have mentioned standards. Did not want to start a separate thread within this thread. So people, if we want to have a standards discussion we should open another thread in the general web building forum IMHO.

Also, I'm not sure if my intention was getting through in my last post: I meant the way that addEventHandler() works, that you can (de)register eventhandlers for each HTML element, so I don't accidentally overwrite previously assigned eventhandlers (whether from a script contents or as an inline eventhandler). That's what I found remarkable.

Apart from that, Algorithm, I think you should clearly define which browsers you want to support in your API. You can't have great functionality and universality at the same time. Just my additional 0.02 Euro.

[whammy]

Sorry about my standards rant... I deleted it so it wouldn't detract from the post. ;)

[Algorithm]

Apart from that, Algorithm, I think you should clearly define which browsers you want to support in your API. You can't have great functionality and universality at the same time. Just my additional 0.02 Euro.As I said before, I'd like to support every JS1.2 compliant browser, but I know that won't happen.

In lieu of that, then, I'd like to support every browser that can handle the events, and can detect the extraneous keys such as PgUp, Shift, and the arrow keys. Beyond that, if any browser can't handle extras, they shouldn't be included.

[Algorithm]

Hello?

[joh6nn]

the following is curtesy of Dave Clark:

<Script language="JavaScript"><!--
function chkKey(evt) {
var mykey, alt, ctrl, shift;
if (window.Event) {
mykey = evt.which;
alt = (evt.modifiers & Event.ALT_MASK) ? true : false;
ctrl = (evt.modifiers & Event.CONTROL_MASK) ? true : false;
shift = (evt.modifiers & Event.SHIFT_MASK) ? true : false;
} else {
mykey = event.keyCode;
alt = event.altKey;
ctrl = event.ctrlKey;
shift = event.shiftKey;
}
if (mykey!=0 && mykey!=16 && mykey!=17 && mykey!=18) {
alert("That key is #"+mykey+" or ' "+String.fromCharCode(mykey)+" '\n\n"+
"alt="+alt+",\n"+
"ctrl="+ctrl+",\n"+
"shift="+shift);
}
return true;
}
if (window.Event)
document.captureEvents(Event.KEYDOWN);
document.onkeydown = chkKey;
//--></Script>

[whammy]

I wish Dave still frequented these forums...