Event handler not working in Internet Explorer

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.

It works for me in IE9. The fiddle doesn't work for you in IE? — James Johnson, Apr 11 '12 at 19:20
I would strongly suggest that you use JQuery - particularly its delegate event handling features. It has worked well in all browsers that I've used it for (which includes IE8), plus it performs much faster on pages which otherwise would have had many individual event handlers. Using the delegate feature of JQuery can be quite helpful in separating code from HTML. — John Fisher, Apr 11 '12 at 19:23

score 4 · Accepted Answer · answered Apr 11 '12 at 19:26

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

Thank you for the comprehensive answer. Also, thanks for pointing out that I might need a framework. I'll probably do so in my future projects. — rhino, Apr 11 '12 at 19:38

score 2 · Answer 2 · answered Apr 11 '12 at 19:20

2

try this:

function clickHandler(e) {
    if(!e)
        e = window.event;
    alert(e);
}

answered Apr 11 '12 at 19:20

Tom

4,096
2
24
38

score 0 · Answer 3 · answered Apr 12 '12 at 14:45

try this:

function funcToCall(e)
{

    //alert('here');
    var keycode;
    if (window.event)
    {
        if (window.event.keyCode == '112') {  // F1 was pressed

        // call your methods in this area

        window.event.returnValue = false;
        return false;
        }

    }   
    else if(e) 
    {
        if (e.which == '112') {  // F1 was pressed, search for other keycodes

        // call your methods in this area

        e.preventDefault();
        return false;

        }

    }   
}

call on your textfield:

onKeyDown="funcToCall(event)"

Event handler not working in Internet Explorer

3 Answers3

Linked