如何正确附加到按键事件？答案

【问题标题】：How do I properly attach to the keypress event?如何正确附加到按键事件？
【发布时间】：2013-05-27 04:34:34
【问题描述】：

我有一个看似简单的问题，但我找不到解决方案。给定以下代码：

<html>
    <head>
        <script type="text/javascript">
            document.onkeypress = function(ev) {
                if (!ev) { alert("Broken"); return; }
                var key = ev.charCode || ev.keyCode;
                alert(key);
            }
        </script>
    </head>
    <body>Test</body>
</html>

如果我将它保存为文件并在 IE 中加载它并按下一个键，它总是会出现“损坏”警报，而在 Firefox 中它可以正常工作（通过键码发出警报）。

如果我使用window.onkeypress 而不是文档处理程序，则在 IE 中根本不会调用它。如果我在onload 事件中附加处理程序，它没有任何区别。使用像 keydown 或 keyup 这样的事件并没有什么不同（在 IE 中仍然存在问题）。

然而，当我使用jsfiddle for the example 时，它在 IE 中运行良好。

那么：jsfiddle 与上面的代码有什么不同，如何让它在 IE 中工作？

【问题讨论】：

你的代码和fiddle的区别在于它将你的代码放在window.onload中。只是说。另外，你的 DOCTYPE 呢？您应该将<!DOCTYPE html> 放在最顶部作为第一行。此外，您不需要检查ev。只需使用ev = ev || window.event; 作为函数的第一行（取出if 行）。
不确定是否是问题所在，但DOCTYPE 在 IE 中尤为重要；否则 IE 会以“怪癖模式”呈现。
好的，就是这样，DOCTYPE 丢失了。我不敢相信 IE 会以这种不明显的微妙方式中断（尤其是因为实际代码在页面中嵌入了更多的 javascript，它们工作得很好）
@Ian：如果您将此作为答案发布，我会接受。

标签： javascript internet-explorer keypress

【解决方案1】：

包含 DOCTYPE 在任何浏览器中都很重要，但在 IE 中更是如此。如果省略一个，我相信它使用的是怪癖模式，这意味着不好的事情。您可以添加 HTML5 文档类型：

<!DOCTYPE html>

Doctypes 应该是 HTML 文件中的第一个非空行。这意味着即使 cmets 也不应该出现在 doctype 之前，并且会导致 IE 使用 quirks 模式。

这里是关于标准模式和怪癖模式之间区别的一个很好的小读物：https://developer.mozilla.org/en-US/docs/Quirks_Mode_and_Standards_Mode

另外，需要注意的是，IE 使用全局 event 变量来表示事件，因此您应该检查它而不是认为它已损坏。例如：

ev = ev || window.event;

可以替换您的if 语句行。

【讨论】：

【解决方案2】：

IE 不会将事件对象传递给您的事件处理程序；相反，它在 window.event 中可用。在 IE 中，当在事件侦听器中使用 addEventListener 或 attachEvent 时，“this”将引用窗口而不是事件来自并附加/添加的元素。

        document.onkeypress = function(ev) {
            ev = window.event||ev;
            var key = ev.charCode || ev.keyCode;
            alert(key);
        }

【讨论】：

这似乎也有效。应该同时完成：添加 DOCTYPE 和使用 window.event
在这种情况下，“在 IE 中的“this”上下文是窗口”语句不正确，您正在考虑 attachEvent。在侦听器作为 DOM 属性添加的情况下，this 将在所有浏览器中引用该元素。此外，在 ES5 中，术语“上下文”仅用于execution context。函数的 this 只是该上下文的一部分，可以通过调用设置为任何对象（或严格模式下的任何值）。
@RobG 是的，你是对的。如果要附加多个处理程序，则不能使用 Element.onSomething 但必须使用 attachEvent 或 addEventListener
@ChrisWue 添加 doctype 很重要，在 Firefox 页面中，未定义时会呈现不同的呈现方式；例如，如果您忽略大小值的 px。任何浏览器都会进入 quirks 模式，因为没有 doc 类型的 html 不是有效的 html，浏览器会为您更正它。

【解决方案3】：

jQuery 还有助于解决其中一些跨浏览器问题，这里是 jQuery：

$(document).keypress(function(e) {
      alert(e.keyCode);
});

FIDDLE HERE

【讨论】：