Question

I am creating a website using JavaScript. The purpose of the JS part is to attach my own keyboard handler to certain text fields.
I managed to narrow down the problem to the code as simple as this fiddle:
http://jsfiddle.net/k9s3n/1/

In Firefox, Opera and Chrome, typing a character in any of the three fields results in displaying an alert box with the key code. In Internet Explorer (IE8 in my case, that’s the lowest version I usually support), however, only input3 works properly – that is, it is the only field to display the dialog box when releasing a key. Trying to type in the other two boxes gives no results, it just logs an error in the console:

keyCode is null or isn’t an object

(not sure if the error message is right, I translated it from my native language).

It seems that only the third solution works regardless of the browser, but in my scenario I have to use the first one or the second one.

I have created another fiddle for further investigation:
http://jsfiddle.net/bSdaJ/
Both of the buttons, when clicked, cause a message box to display. In Firefox, Opera and Chrome, the box says "[object MouseEvent]", while in IE it says "undefined".
What can I do about that?

P.S. As indicated by the first fiddle, everything works fine if I use inline event handling. However, my goal in this project is to separate HTML and JS completely, so I cannot use that. I’m doing it for a friend and I want the HTML part to be plain, clear markup code.

Answer 1

You shouldn’t be using DOM 0 events (events attached via HTML attributes). You should use event listeners, attached using element.addEventListener in W3C browsers and element.attachEvent in IE. If you’re building a large website, you should be using a JS framework, but that’s a different question that you didn’t ask. A framework (the most popular being jQuery) would provide abstract methods to do this, but in the absence of one, here’s a simple function to do it cross-browser.

function addEvent(element,evName,fn) {
    if (element.addEventListener) {
        element.addEventListener(evName,fn,false);
    } else if (element.attachEvent) {
        element.attachEvent('on'+evName,function(e) {
            fn(e || window.event);
        });
    }
}

This simple function uses feature detection to normalize the different event behavior between the browsers. IE uses a different listener function with a different signature, and IE also does not follow the W3C spec that requires the handler to receive the event object as an argument; instead, it sets the global window.event` property.

Example usage: http://jsfiddle.net/k9s3n/3/

Note also that IE and W3C browsers have different approaches to the event.keyCode property (in that other browsers’ approaches are correct).