События HTML5 и Javascript
© IGP, январь 2025 г.
Для взаимодействия с пользователем в JavaScript определен механизм событий. Например, когда пользователь нажимает кнопку, то возникает событие нажатия кнопки. Аналогично когда пользователь вводит в текстовое поле текст, возникает событие этого текстового поля. В коде JavaScript мы можем определить возникновение события и как-то его обработать.
Сначала собственно происходит событие, например, пользователь нажал на кнопку. Объект, который сгенерировал событие, еще называется эмиттером/эмитентом события. После того как произошло событие, оно помещается в очередь событий (event queue), что гарантирует, что события, которые были сгенерированы первыми, также будут обработаны в первую очередь.
Цикл событий (event loop) постоянно проверяет, есть ли новое событие в очереди событий, и если оно есть, соответствующее событие пересылается обработчикам событий (event handler). В JavaScript эти обработчики событий представляют собой простые функции, которые позволяют отреагировать на возникшее событие. Подобный подход еще называют событийным программированием (event-driven programming).
Если для события не определено обработчиков, то для него выполняется действие, которое определено браузером по умолчанию.
В JavaScript есть следующие типы событий:
- События мыши (перемещение курсора, нажатие мыши и т.д.)
- События клавиатуры (нажатие или отпускание клавиши клавиатуры)
- События жизненного цикла элементов (например, событие загрузки веб-станицы)
- События элементов форм (нажатие кнопки на форме, выбор элемента в выпадающем списке и т.д.)
- События, возникающие при изменении элементов DOM
- События, возникающие при касании на сенсорных экранах
- События, возникающие при возникновении ошибок
Применение событий не ограничены только графическим интерфейсом, однако графический интерфейс — наиболее показательная сфера применения событий.
События мыши
click — возникает при нажатии указателем мыши на элемент
dblclick — возникает при двойном нажатии указателем мыши на элемент
contextmenu — возникает при открытии контекстного меню (правой кнопкой мыши)
mousedown — возникает при нахождении указателя мыши на элементе,
когда кнопка мыши находится в нажатом состоянии
mouseup — возникает при нахождении указателя мыши на элементе
во время отпускания кнопки мыши
mousemove — возникает при прохождении указателя мыши над элементом
mouseover — возникает при вхождении указателя мыши в границы элемента
mouseout — возникает, когда указатель мыши выходит за пределы элемента
mouseenter — возникает при вхождении указателя мыши в границы элемента
mouseleave — возникает, когда указатель мыши выходит за пределы элемента
События клавиатуры
keydown — возникает при нажатии клавиши клавиатуры и длится, пока нажата клавиша
keyup — возникает при отпускании клавиши клавиатуры
keypress — возникает при нажатии клавиши клавиатуры, но после события keydown
и до события keyup.
События элементов форм
input — возникает при изменении текста в элементах <input> и <textarea>
или в элемент с атрибутом contenteditable
change — возникает при изменении значения в списках, флажках (checkbox) или радиокнопках
submit — возникает при отправке формы
reset — возникает при сбросе формы (через кнопку reset)
События фокусировки
focus — возникает при получении фокуса
blur — возникает при потере фокуса
focusin — возникает при получении фокуса (в отличие от события focus, это событие
поднимающееся. Про поднимающиеся и опускающиеся события далее)
focusout — возникает при потере фокуса(это событие поднимающееся в отличие
от события blur)
Cобытия интерфейса
load — возникает при загрузке веб-страницы
unload — возникает при выгрузке веб-страницы (например, когда запрошена
страница по новому адресу)
abort — возникает при отмене загрузки ресурса
Error — возникает при генерации ошибки при загрузке страницы (например,
ошибка в коде JavaScript)
select — возникает при выделении текст на странице
resize — возникает при изменении размеров окна браузера
scroll — возникает при прокрутке
cut — возникает при вырезании текста из поля ввода (например, с помощью Ctrl+X)
copy — возникает при копировании текста из поля ввода (например, с помощью Ctrl+C)
paste — возникает при вставке текста в поле ввода (например, с помощью Ctrl+V)
select — возникает при выделении текста в поле ввода
Встроенные обработчики событий
Это так называемые встроенные обработчики или inline-обработчики, которые определяются в коде элемента с помощью атрибутов. Подобные атрибуты начинаются с префикса on.
<body>
<button onclick="console.log('Clicked!')">Click</button>
</body>
Можно определить несколько инструкций подобным образом
Слушатели событий
Для работы со слушателями событий в JavaScript есть объект EventTarget, который определяет методы addEventListener() (для добавления слушателя) и removeEventListener() для удаления слушателя.
<button id="btn">Click Me</button>
<script>
let clicks = 0; // счетчик нажатий
function btn_click(){
console.log("Clicked", ++clicks);
}
const btn = document.getElementById("btn");
// прикрепляем обработчик события "click"
btn.addEventListener("click", btn_click);
</script>
Передача данных в обработчик события
<button id="btn" onclick="btn_click('Clicked')">Click Me</button>
Объект Event
При обработке события браузер автоматически передает в функцию обработчика в качестве параметра объект Event, который инкапсулирует всю информацию о событии.
- bubbles: является ли восходящим событием.
- cancelable: можно ли отменить стандартную обработку события
- currentTarget: определяет элемент, к которому прикреплен обработчик события
- defaultPrevented: если был вызван у объекта Event метод preventDefault()
- eventPhase: стадия обработки события:
- 0 (Event.NONE)
- 1 (Event.CAPTURING_PHASE)
- 2 (Event.AT_TARGET)
- 3 (Event.BUBBLING_PHASE)
- target: указывает на элемент, на котором было вызвано событие
- timeStamp: время возникновения события
- type: имя события
- isTrusted: событие было сгенерировано элементами веб-страницы или кодом JavaScript
Остановка выполнения события
С помощью метода preventDefault() объекта Event можно остановить дальнейшее выполнение события.
События мыши
Для работы с событиями указателя мыши определен объект MouseEvent.
altKey — возвращает true, если была нажата клавиша Alt во время генерации события
button — содержит номер нажатой кнопки мыши
buttons — содержит номер, который представляет нажатую кнопку мыши.
1 — обозначает левую кнопку мыши, 2 — правую кнопку мыши
clientX — определяет координату Х окна браузера
clientY — определяет координату Y окна браузера
ctrlKey — возвращает true, если была нажата клавиша Ctrl во время генерации события
movementX — содержит координату Х относительно предыдущей координаты
movementY — содержит координату Y относительно предыдущей координаты
metaKey — нажата ли метаклавиша клавиатуры
region — содержит идентификатор области или элемента, которая относится к событию
relatedTarget — определяет вторичный источник возникновения события
screenX — определяет координату Х относительно верхнего левого угла экрана монитора
screenY — определяет координату Y относительно верхнего левого угла экрана монитора
shiftKey — нажата ли клавиша Shift во время генерации события
События клавиатуры
altKey — возвращает true, если была нажата клавиша Alt во время генерации события
key — возвращает символ нажатой клавиши
code — возвращает строковое представление нажатой клавиши физической клавиатуры QWERTY
ctrlKey — была ли нажата клавиша Ctrl во время генерации события
metaKey — была ли нажата во время генерации события метаклавиша клавиатуры
shiftKey — была ли нажата клавиша Shift во время генерации события