window.onkeypress 和 window.document.body.onkeypress 的区别

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

1. 窗口.onkeypress
2. window.document.body.onkeypress

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

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

HTML DOM

window.onkeypress: window.onkeypress 事件在 window 对象上按下一个键时被触发。

句法：

window.onkeypress = function(){myScript};

方法：

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

注意：这里选中的对象是window对象，即DOM的根节点。

例子：

HTML

  

    
        window.onkeypress = function() {myFunction()};
  
        function myFunction() {
          alert("Hi");
        }
    

  

输出：

window.document.body.onkeypress：当在 body 对象上按下一个键时会触发 window.document.body.onkeypress 事件。

句法：

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

方法：

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

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

例子：

HTML

  

    
        window.document.body.onkeypress = function() {myFunction()};
  
        function myFunction() {
          alert("Hi");
        }
    

  

输出：

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

S. No.	window.onkeypress	window.document.body.onkeypress
1	The selected object is the window object, i.e. the root node of DOM.	The selected object is the body object which is the child of the HTML node which is further the child of window object, i.e. the root node of DOM.
2	The window is all the file	window.document.body refers to the body tag
3	The window is supporting IE4 and above while	document.body supports IE6 and above

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