Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Проблема с событием keyup (https://javascript.ru/forum/misc/74856-problema-s-sobytiem-keyup.html)

BNB 12.08.2018 18:40

Проблема с событием keyup
 
Пользуюсь Google Chrome.
К пустой странице подключил скрипт, думаю объяснять тут нечего)

document.onkeydown = function() {
  alert("keydown");
}
    
document.onkeyup = function() {
  alert("keyup");
}


Рассчитывал, что при нажатии любой клавиши будут выводиться оба обработчика событий, т.к. сработает и событие keydown и событие keyup, но почему-то срабатывает только обработчик события keydown.

Затем решил поставить обработчики событий на window, но результат такой же.

Также, если просто 100 раз нажимать на какую-либо кнопку и быстро закрывать модальные окна alert-а, то иногда прослеживается событие keyup, если попробовать нажать Ctrl+ R (перезагрузка страницы), то тоже сработает keyup.

Если заменить alert, например, на console.log, то всё работает как надо.

Получается, что встроенные модальные окна при работе с событиями клавиш лучше не использовать, а делать свои кастомные модальные окна, т.к. при появлении встроенного модального окна события связанные с клавишами не возникают?

Если да, то следует ли из этого, что любые существующие события на момент работы встроенного модального окна не будут возникать?

Malleys 12.08.2018 18:52

<style>dialog { box-shadow: 0 0 0 100vmax rgba(0,0,0,.1); }</style>
<script>
document.onkeydown = document.onkeyup = function(event) {
	if(event.keyCode === 13) return;
	
	var dialog = document.createElement("dialog");
	dialog.innerHTML = "<div>" + event.type + " " + event.key + "</div>";
	
	var closeButton = document.createElement("button");
	closeButton.onclick = function() { dialog.close(); dialog.remove(); };
	closeButton.textContent = "Закрыть";
	dialog.appendChild(closeButton);
	
	document.body.appendChild(dialog);
	dialog.show();
}

</script>


Вообще-то происходят оба события, просто когда открывается блокирующий alert, то второе событие теряется

BNB 12.08.2018 19:21

Разве событие mouseup происходит? Не очень понимаю как оно "теряется". Оно срабатывает на элементе выше window и из-за этого ни document, ни window не узнают про него? Просто раз оно теряется, значит оно все-таки возникло. Или на DOM элементах стоит скрытая проверка, условно говоря, if (alertActivation) return? Мне пока кажется, что на время работы модального окна события просто не возникают. Если нет, то можно поподробнее, пожалуйста, спасибо.

Кстати в учебнике Кантора в теме про события keyup, keydown, keypress в одной задаче он написал, что при alert событие keyup не возникает. Так что больше пока склоняюсь к этой точке зрения.

Malleys 12.08.2018 19:30

<script>
document.onkeydown = function() {
  alert("keydown");
}
    
document.onkeyup = function() {
  alert("keyup");
}
</script>


Вы нажимаете кнопку X происходит событие keydown открывается alert("keydown");

Вы продолжаете удерживать ту же клавишу, но события keydown больше не возникают, поскольку ещё открыт alert, который всё блокирует.

Вы отпускаете клавишу, но событие keyup не возникают, поскольку ещё открыт alert, который всё блокирует. (но если вы всё-таки ухитрились бы быстро закрыть alert, то событие keyup возникло бы? Например, если нажимать последовательно Esc⎋ или Enter⏎, то закрывается alert и событие ловится)

Пока открыт alert, который всё блокирует, никакое событие не возникнет, сколько бы вы ни нажимали на клавиатуру.

"теряется" в том плане, что вообще не попадает в событийную модель JavaScript

BNB 12.08.2018 19:39

Ну Вы сначала написали:"Пока открыт alert, который всё блокирует, никакое событие не возникнет...", а потом:" "теряется" в том плане, что вообще не попадает в событийную модель JavaScript", то есть оно возникает, но не попадает в событийную модель) Тут как будто какое-то противоречие возникает, но может это я просто не так понимаю Вас. В любом случае, основная моя мысль подтвердилась, спасибо.

Malleys 12.08.2018 20:03

Тут на самом деле нет противоречия, вы нажимаете клавишу на клавиатуре, микропроцессор клавиатуры выясняет на какую клавишу нажали, и посылает информацию в компьютер. (Событие свершилось!) Операционная система решает, что делать с этой информацией, например, поскольку на данный момент активно окно браузера, то эта информация попадает в браузер. (Событие свершилось!) В браузере эта информация попадает на интерфейс модального окна от браузера, а не на вашу страницу.

"Пока открыт alert, который всё блокирует, никакое событие не возникнет..." С точки зрения программы на JS, как вы уже догадались (или нет?), действительно не возникло никаких событии!

BNB 12.08.2018 20:07

Хорошо, я понял, спасибо.


Часовой пояс GMT +3, время: 11:35.