似乎body元素是第一个获得keydownorkeypress事件的元素，然后html是 , document, and window（这些是唯一会获得事件的 4 个元素 - 没有其他元素会获得它），但我并不完全确定。这实际上是在哪里指定的吗？
也就是说，如果没有输入焦点或者元素没有被点击或者有焦点，那么它是“全局”键盘事件，并且顺序是：body, html, document, window-- 四个并且只有四个元素。这个规范在哪里？
（这与这个问题有些相关：How should a modal dialog's key event handler is used using ReactJS?）
很难在 JSFiddle 或此处的代码片段中尝试它，因为呈现的结果在 iframe 中。但如果你想尝试一下，这里是整个网页：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#outer {
width: 600px;
height: 400px;
background: orange;
}
#inner {
width: 300px;
height: 200px;
background: #07f;
}
input {
width: 210px;
background: yellow;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
<input id="inner-input" />
</div>
<input id="outer-input" />
</div>
<script>
document
.querySelector("#inner-input")
.addEventListener("keydown", function (ev) {
console.log("inner input", ev);
});
document
.querySelector("#outer-input")
.addEventListener("keydown", function (ev) {
console.log("outer input", ev);
});
document
.querySelector("#outer")
.addEventListener("keydown", function (ev) {
console.log("outer div", ev);
});
document
.querySelector("#inner")
.addEventListener("keydown", function (ev) {
console.log("inner div", ev);
});
document
.querySelector("body")
.addEventListener("keydown", function (ev) {
console.log("body", ev);
});
document
.querySelector("html")
.addEventListener("keydown", function (ev) {
console.log("html", ev);
});
document.addEventListener("keydown", function (ev) {
console.log("document", ev);
});
window.addEventListener("keydown", function (ev) {
console.log("window", ev);
});
</script>
</body>
</html>