事件处理程序无法在Internet Explorer中工作 [英] Event handler not working in Internet Explorer
问题描述
我正在使用JavaScript创建一个网站。 JS部分的目的是将我自己的键盘处理程序附加到某些文本字段。
我设法将问题缩小到代码就像这个小提琴一样简单：
http://jsfiddle.net/k9s3n/1/
在Firefox，Opera和Chrome中，在三个字段的任意中键入字符会导致显示带有密钥代码的警告框。在Internet Explorer（我的情况下是IE8，这是我通常支持的最低版本）中，只有 input3 正常工作 - 也就是说，它是显示对话框的唯一字段释放钥匙时的方框。尝试输入其他两个框没有结果，它只是在控制台中记录错误：
keyCode为null或不是对象 （不确定错误消息是否正确，我是用我的母语翻译的。）
似乎只有第三个解决方案无论浏览器如何都有效，但在我的场景中我必须使用第一个解决方案或第二个。
我为进一步调查创造了另一个小提琴：
http://jsfiddle.net/bSdaJ/
单击这两个按钮会显示一个消息框。在Firefox，Opera和Chrome中，框中显示[object MouseEvent]，而在IE中则表示未定义。
我该怎么办？在此先感谢您的帮助。
P.S。正如第一个小提琴所示，如果我使用内联事件处理，一切正常。但是，我在这个项目中的目标是完全分离HTML和JS，所以我不能使用它。我正在为朋友做这件事，我希望HTML部分是简单明了的标记代码。
你不应该'使用DOM 0事件（通过HTML属性附加的事件）。您应该使用事件侦听器，在W3C浏览器中使用 element.addEventListener 附加，在IE中使用 element.attachEvent 。如果您正在构建一个大型网站，那么您应该使用JS框架，但这是一个您没有问过的不同问题。一个框架（最流行的是jQuery）将提供抽象方法来实现这一点，但是如果没有一个，这里有一个简单的功能来跨浏览器。
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）;
}）;
}
}
这个简单的函数使用特征检测来规范化不同的事件浏览器之间的行为。 IE使用具有不同签名的不同侦听器函数，IE也不遵循要求处理程序将事件对象作为参数接收的W3C规范;相反，它设置全局window.event`属性。
示例用法： event.keyCode property（其他浏览器的方法是正确的）。
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.
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).
这篇关于事件处理程序无法在Internet Explorer中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
