window.onkeypress与window.document.body.onkeypress的差异

Question

我继承了这个JavaScript代码，它读取输入键事件并对它们进行处理，但是对于按下的每个键，我都会得到重复。

Intelisense将“窗口”显示为

var窗口:窗口& globalThis类型

    this.listen = function() {

       //when comment one of these two out, my duplicate issue goes away.
       window.onkeypress = this.captureKeyPress;  
       window.document.body.onkeypress = this.captureKeyPress;
    }


    this.captureKeyPress = function(e) {
       //process key input event
    }

我研究了一下，但我似乎找不到window.keypress和window.document.body.onkeypress.之间的区别有关按键事件的一些资源引用了GlobalEventHandlers.onkeypress或document.onkeypress。

有人能告诉我谈论这两件事及其差异的文档或资源吗？我觉得他们是以这种方式实现的，因为我支持传统浏览器，如IE7或IE9以及更早的版本。

Answer 1

Document.body属性表示当前文档的或节点，如果不存在此类元素，则为null。表示运行脚本的窗口的全局变量window将公开给JavaScript代码。

基本上，window.document.body是指body标记，而window是所有文件。至于支持IE7或IE9等传统浏览器，window支持IE4和更高版本，而Document.body支持IE6和更高版本。无论哪种方式，IE7和更高版本都可以处理该事件。

资料来源

Document.body

窗户

Answer 2

它们至少在Chrome上也是一样的--一个在窗户上，另一个在身体上。

​

window.onkeypress = function(e) { console.log("okp",e.key) }
window.document.body.onkeypress = function(e) { console.log("dbokp",e.key) }

​

Answer 3

请参阅文档对象和窗口对象之间有什么区别？

不同之处在于，使用window.onkeypress，您将在窗口对象上注册一个事件，而使用window.document.body.onkeypress，您将在主体上注册一个事件。事件在焦点集中时将触发特定元素。但是，注册到该元素父元素的事件也会触发，因此注册到窗口的事件将触发任意一种方式，在文档或主体上注册的事件也会触发。

请参阅jsbin示例

​

window.onkeypress = function() {
  console.log('key pressed window')
}

window.document.body.onkeypress = function() {
  console.log('key pressed body')
}

document.getElementById('div').onkeypress = function() {
  console.log('key pressed div');
}

<div id="div">
  <input type="text" />
</div>

​