#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 и выше справляются с событием.
источники
Ответ №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>