понимание OnkeyPress против Onkeyup против OnkeyDown

. При поиске различий между этими тремя событиями вы можете столкнуться с общим неправильным представлением о том, что OnKeyPress происходит одновременно с OnKeyUp. Давайте проясним эту путаницу и пролит свет на уникальные характеристики каждого события.

Timeline события

] В последовательности событий ввода ключей у нас есть следующий разрыв:

1. onkeypress:
]
2. установил и рекомендовал использовать вместо этого onkeydown. Key. аналогия с событиями мыши
, чтобы понять отношения между этими ключевыми событиями, давайте нарисуем аналогию с их аналогиями мыши:
onkeyup: эквивалент MouseUp

Исключение браузера: webkit

В мире веб -браузеров Webkit выделяется, внедряя дополнительное событие: TextInput. Последовательность события для Webkit, таким образом, становится:

• keydown ключ TextInput keyup
• Практическая демонстрация
• , чтобы свидетельствовать об этих событиях в действии, запустите следующий код фрагмент:

window.addeventListener ("keyup", log); window.addeventlistener ("keypress", log); window.addeventlistener ("keydown", log); function log (event) { console.log (event.type); }

Этот скрипт регистрирует тип события в консоли, когда вы взаимодействуете с клавиатурой. Вы заметите особую последовательность событий, когда вы нажимаете и выпустите клавиши.

]