Блог

Главная - Вопросы по программированию - Различия между window.onkeypress и window.document.body.onkeypress

Различия между window.onkeypress и window.document.body.onkeypress

#javascript

#javascript

Вопрос:

Я унаследовал этот код JavaScript, который считывает событие ввода ключа и обрабатывает их, однако я получаю дубликат для каждой нажатой клавиши.

Intelisense показывает «окно» как

окно переменной: Window amp; typeof 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.нажатие клавиши и window.document.body.onkeypress. Некоторые ресурсы о событии нажатия клавиши относятся к GlobalEventHandlers.onkeypress или document.onkeypress .

Может кто-нибудь указать мне на документ или ресурс, в котором говорится об этих двух событиях и их различиях? У меня такое ощущение, что они реализовали этот способ из-за поддержки устаревших браузеров, таких как IE7 или IE9 и более ранних версий.

Комментарии:

1. Событие одно и то же, они просто применяются к разным вещам, то есть одно применяется ко всему окну, а другое применяется только к <body> элементу

2. Ах, времена поиска, которые у нас были на quirksmode.org/dom/events/keys.html в прошлом.

3. К вашему сведению onkeypress , предупреждение устарело. developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers /…

Ответ №1:

Документ.свойство body представляет узел or текущего документа или null, если такой элемент не существует.

Глобальная переменная window, представляющая окно, в котором выполняется скрипт, подвергается воздействию кода JavaScript.

в основном window.document.body ссылается на тег body, в то время window как это весь файл. что касается поддержки устаревших браузеров, таких как IE7 или IE9 и более ранних версий — window поддерживает IE4 и выше, в то время Document.body как поддерживает IE6 и выше. в любом случае IE7 и выше справляются с событием.

источники

Document.body

окно

Ответ №2:

По крайней мере, в Chrome они работают одинаково — один находится в окне, другой — в теле

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

Ответ №3:

Посмотрите, в чем разница между объектами document и window

Разница в том, что с window.onkeypress помощью вы регистрируете событие в объекте window, а с 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>