onkeypress 事件可以在 JavaScript 中使用以下两种方式触发：

  • window.onkeypress
  • window.document.body.onkeypress

要了解两者之间的区别，我们需要看一下HTML DOM(文档对象模型)：

  • DOM 是一个将 HTML 文档表示为树结构的模型。
  • 树结构将根节点作为文档对象。
  • 其他节点(如 HTML、HEAD 和 BODY)彼此之间具有父/子关系。

window.onkeypress：当在窗口对象上按下某个键时，将触发 window.onkeypress 事件。

语法：

window.onkeypress = function(){myScript};

方法：

  • 使用可用的窗口对象调用 window.onkeypress 来执行函数。
  • 定义需要执行的函数(在例子中为 myScript())。

注意：这里选择的对象是窗口对象，即DOM的根节点。

例：

<!DOCTYPE html>
<html>
<body>
    <script>
        window.onkeypress = function() {myFunction()};
        function myFunction() {
        alert("Hi,vsdiffer.com");
        }
    </script>
</body>
</html>

window.document.body.onkeypress：当在正文对象上按下某个键时，将触发 window.document.body.onkeypress 事件。

语法：

window.document.body.onkeypress = function(){myScript};

方法：

  • 使用可用的窗口对象调用 window.onkeypress 来执行函数。
  • 定义需要执行的函数(在例子中为 myScript())。

注意：这里选择的对象是 body 对象，它是 HTML 节点的子节点，它又是窗口对象的子节点，即 DOM 的根节点。

例：

<!DOCTYPE html>
<html>

<body>
    <script>
        window.document.body.onkeypress = function() {myFunction()};
        function myFunction() {
        alert("Hi,yiibai.com");
        }
    </script>
</body>
</html>

window.onkeypress 和 window.document.body.onkeypress之间的区别：

编号 window.onkeypress window.document.body.onkeypress
1 选定的对象是窗口对象，即DOM的根节点。 选定的对象是 body 对象，它是 HTML 节点的子节点，而 HTML 节点又是窗口对象的子对象，即 DOM 的根节点。
2 window是所有文件 window.document.body 引用 body 标记
3 window支持 IE4 及更高版本 document.body支持 IE6 及更高版本
4 当用户按键盘上的键时，将发生 windows.onkeypress事件。 当用户按 body 对象上的键时，将发生 window.document.body.onkeypress 事件。
5 它支持的浏览器是 ：Chrome ， Microsoft Edge， Safari， Opera Mini， Firefox。 它支持的浏览器是 ：Chrome， Microsoft Edge， Safari， Opera Mini， Firefox

结论：尽管它们产生相似的输出，但它们在选择对象方面的功能是不同的。