|
События клавиатуры keydown и keyupНа предыдущем занятии мы с вами рассматривали события от мыши. Продолжим тему событий и рассмотрим события от клавиатуры:
Добавим эти обработчики в наш документ для поля ввода input: <!DOCTYPE html> <html> <head> <title>Уроки по JavaScript</title> </head> <body> <input id="inp" onkeydown="keyHandler(event)" onkeyup="keyHandler(event)" /> <script> function keyHandler(event) { console.log(event.type); } </script> </body> </html> Если мы в поле ввода нажмем на клавишу клавиатуры, то увидим сначала событие keydown, а затем, событие keyup. Или же, если нажать и держать клавишу, то при автоповторе будет возникать несколько событий keydown и при отпускании – одно событие keyup. Для событий, возникающих при автоповторе, свойство event.repeat равно true. Так что, если нам нужно узнать как было сгенерировано текущее событие, то достаточно прочитать это свойство: console.log("repeat: "+event.repeat); Теперь посмотрим, как можно определить какая была нажата клавиша и как получить символ, связанный с ней. Для этого в объекте event есть два таких свойства:
В чем между ними разница? Давайте выведем их в консоль и посмотрим: console.log("key: "+event.key+", code: "+event.code); Теперь, нажимая на клавишу ‘a’ мы видим, что свойство key соответствует символу этой клавиши, а code – ее коду (строке KeyA). Причем, этот код остается неизменным и для заглавных символов и при русской раскладке клавиатуры. То есть, если нам нужно просто понять: какая клавиша была нажата, то следует использоваться свойство code, а если нужен символ, связанный с этой клавишей – то используется свойство key. Вообще, возвращаемые коды клавиш формируются по такому правилу:
В старых версиях языка JavaScript использовалось еще одно событие от клавиатуры – keypress. Однако его работа в разных браузерах сильно различается, поэтому в новых спецификациях данное событие помечено как устаревшее и вместо него следует пользоваться событиями keydown и keyup. Также устаревшими считаются следующие свойства объекта event при работе с клавиатурой: event.keyCode, event.charCode, event.which И ими теперь лучше не пользоваться. Далее рассмотрим событие scroll, связанное с прокруткой всего документа или же с содержимым отдельного элемента. Добавим в наш HTML-документ вот такой список: <ul style="font-size: 20px"> <li>offsetParent<li>offsetLeft<li>offsetTop <li>offsetWidth<li>offsetHeight<li>clientTop <li>clientLeft<li>clientWidth<li>clientHeight <li>scrollWidth<li>scrollHeight<li>scrollLeft <li>scrollTop<li>innerHeight<li>innerWidth </ul> И повесим обработчик события scroll на объект window: <input id="inp" style="position: fixed" onkeydown="keyHandler(event)" onkeyup="keyHandler(event)" />
window.addEventListener("scroll", function(event) { inp.value = pageYOffset; }); Теперь при прокрутке в нашем поле ввода будет отображаться смещение документа по вертикали. Вообще событие scroll довольно часто используется в практике программирования, например, для автоматической подзагрузки данных, когда пользователь прокручивает страницу до конца. Также обратите внимание, что для данного события нельзя отменить действие браузера по умолчанию, используя метод event.preventDefault() так как фактическая прокрутка отрабатывается до возникновения этого события в JavaScript. Если по каким-то причинам нужно запретить пользователю прокручивать документ, то это лучше сделать через CSS свойство overflow: hidden: document.body.style.overflow = "hidden"; |
