© IGP, январь 2025 г.
Для взаимодействия с пользователем в JavaScript определен механизм событий. Например, когда пользователь нажимает кнопку, то возникает событие нажатия кнопки. Аналогично когда пользователь вводит в текстовое поле текст, возникает событие этого текстового поля. В коде JavaScript мы можем определить возникновение события и как-то его обработать.
Сначала собственно происходит событие, например, пользователь нажал на кнопку. Объект, который сгенерировал событие, еще называется эмиттером/эмитентом события. После того как произошло событие, оно помещается в очередь событий (event queue), что гарантирует, что события, которые были сгенерированы первыми, также будут обработаны в первую очередь.
Цикл событий (event loop) постоянно проверяет, есть ли новое событие в очереди событий, и если оно есть, соответствующее событие пересылается обработчикам событий (event handler). В JavaScript эти обработчики событий представляют собой простые функции, которые позволяют отреагировать на возникшее событие. Подобный подход еще называют событийным программированием (event-driven programming).
Если для события не определено обработчиков, то для него выполняется действие, которое определено браузером по умолчанию.
В JavaScript есть следующие типы событий:
Применение событий не ограничены только графическим интерфейсом, однако графический интерфейс — наиболее показательная сфера применения событий.
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)
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, который инкапсулирует всю информацию о событии.
С помощью метода 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 во время генерации события