Event handler not working in Internet Explorer

问题

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? Thanks for any help in advance.

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.

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

回答2:

try this:

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

回答3:

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

来源：https://stackoverflow.com/questions/10112431/event-handler-not-working-in-internet-explorer

标签

javascript

internet-explorer

javascript-events