События 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 во время генерации события