События
Введение в обработку событий
Для взаимодействия с пользователем в JavaScript определен механизм событий. Например, когда пользователь нажимает кнопку, то возникает событие нажатия кнопки. Аналогично когда пользователь вводит в текстовое поле текст, возникает событие этого текстового поля. В коде JavaScript мы можем определить возникновение события и как-то его обработать.
Вкратце общий механизм выглядит следующим образом. Сначала собственно происходит событие, например, пользователь нажал на кнопку. Объект, который сгенерировал событие, еще называется эмиттером/эмитентом события. После того как произошло событие, оно помещается в очередь событий (event queue), что гарантирует, что события, которые были сгенерированы первыми, также будут обработаны в первую очередь. Цикл событий (event loop) постоянно проверяет, есть ли новое событие в очереди событий, и если оно есть, соответствующее событие пересылается обработчикам событий (event handler). В JavaScript эти обработчики событий представляют собой простые функции, которые позволяют отреагировать на возникшее событие. Подобный подход еще называют событийным программированием (event-driven programming).
Если для события не определено обработчиков, то для него выполняется действие, которое определено браузером по умолчанию.
В JavaScript есть следующие типы событий:
События мыши (перемещение курсора, нажатие мыши и т.д.)
События клавиатуры (нажатие или отпускание клавиши клавиатуры)
События жизненного цикла элементов (например, событие загрузки веб-станицы)
События элементов форм (нажатие кнопки на форме, выбор элемента в выпадающем списке и т.д.)
События, возникающие при изменении элементов DOM
События, возникающие при касании на сенсорных экранах
События, возникающие при возникновении ошибок
Стоит отметить, что применение событий не ограничены только графическим интерфейсом, однако графический интерфейс - наиболее показательная сфера применения событий.
Рассмотрим простейшую обработку событий. Например, на веб-странице у нас есть следующий элемент div:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>METANIT.COM</title>
</head>
<body>
<div id="rect" onclick="console.log('Clicked!')" style="width:50px;height:50px;background-color:blue;"></div>
</body>
</html>
Здесь определен обычный блок div, который имеет атрибут onclick, который задает обработчик события нажатия на блок div. То есть, чтобы обработать какое-либо событие, нам надо определить для него обработчик. Обработчик представляет собой код на языке JavaScript. В данном случае обработчик просто выводит строку на консоль:
console.log('Clicked!')
И при нажатии на блок мы сможем увидеть в консоли браузера соответствующее сообщение:
Базовые события
Вкратце перечислю основные события, которые мы можем использовать в JavaScript. События мыши:
Событие | Описание | Объект события |
| возникает при нажатии указателем мыши на элемент |
|
| возникает при двойном нажатии указателем мыши на элемент |
|
| возникает при открытии контекстного меню (правой кнопкой мыши) |
|
| возникает при нахождении указателя мыши на элементе, когда кнопка мыши находится в нажатом состоянии |
|
| возникает при нахождении указателя мыши на элементе во время отпускания кнопки мыши |
|
| возникает при прохождении указателя мыши над элементом |
|
| возникает при вхождении указателя мыши в границы элемента |
|
| возникает, когда указатель мыши выходит за пределы элемента |
|
| возникает при вхождении указателя мыши в границы элемента |
|
| возникает, когда указатель мыши выходит за пределы элемента |
|
События клавиатуры.
Событие | Описание | Объект события |
| возникает при нажатии клавиши клавиатуры и длится, пока нажата клавиша |
|
| возникает при отпускании клавиши клавиатуры |
|
| возникает при нажатии клавиши клавиатуры, но после события keydown и до события keyup. |
|
События элементов форм:
Событие | Описание | Объект события |
|
возникает при изменении текста в элементах |
|
|
возникает при изменении значения в списках, флажках (checkbox) или радиокнопках |
|
|
возникает при отправке формы |
|
|
возникает при сбросе формы (через кнопку reset) |
|
События фокусировки:
Событие | Описание | Объект события |
|
возникает при получении фокуса |
|
|
возникает при потере фокуса |
|
|
возникает при получении фокуса (в отличие от события |
|
|
возникает при потере фокуса(это событие поднимающееся в отличие от события |
|
Общие события интерфейса:
Событие | Описание | Объект события |
|
возникает при загрузке веб-страницы |
|
|
возникает при выгрузке веб-страницы (например, когда запрошена страница по новому адресу) |
|
|
возникает при отмене загрузки ресурса |
|
|
возникает при генерации ошибки при загрузке страницы (например, ошибка в коде JavaScript) |
|
|
возникает при выделении текст на странице |
|
|
возникает при изменении размеров окна браузера |
|
|
возникает при прокрутке |
|
|
возникает непосредственно перед выгрузкой страницы |
|
|
возникает при полной загрузке дерева DOM |
|
|
возникает при вырезании текста из поля ввода (например, с помощью Ctrl+X) |
|
|
возникает при копировании текста из поля ввода (например, с помощью Ctrl+C) |
|
|
возникает при вставке текста в поле ввода (например, с помощью Ctrl+V) |
|
|
возникает при выделении текста в поле ввода |
|
События мобильных устройств и других устройств с сенсорным экраном:
Событие | Описание | Объект события |
|
возникает при изменении ориентации устройства |
|
|
возникает, когда появляются новые данные об ориентации устройства |
|
|
возникает с регулярными интервалами и указывает на силу ускорения, действующую на конечное устройство |
|
|
возникает при касании дисплея |
|
|
возникает, когда палец убран с дисплея (касание завершилось) |
|
|
возникает при движении пальцем по сенсорному дисплею |
|
|
возникает при прерывании отслеживания касаний |
|
- Глава 1. Введение в JavaScript
- Глава 2. Основы javascript
- Глава 3. Функциональное программирование
- Глава 4. Объектно-ориентированное программирование
- Объекты
- Ключевое слово this
- Вложенные объекты и массивы в объектах
- Копирование и сравнение объектов
- Проверка наличия и перебор методов и свойств
- Объекты в функциях
- Функции-конструкторы объектов
- Расширение объектов. Прототипы
- Функция как объект. Методы call и apply
- Функция Object.create. Конфигурация свойств объектов
- Наследование прототипов
- Наследование прототипов конструкторов
- Инкапсуляция свойств. Геттеры и сеттеры
- Деструктуризация
- Оператор ?.
- Константные объекты. Запрет изменения объекта
- Глава 5. ООП. Классы.
- Глава 6. Массивы
- Глава 7. Строки и регулярные выражения
- Глава 8. Обработка ошибок
- Глава 9. Встроенные объекты
- Глава 10. Коллекции и итераторы
- Глава 11. Работа с DOM
- Глава 12. События
- Глава 13. Работа с формами
- Глава 14. Работа с браузером и BOM
- Глава 15. Форматы JSON и XML
- Глава 16. Хранение данных
- Глава 17. Promise, async и await
- Глава 18. AJAX-запросы и XMLHttpRequest
- Глава 19. Fetch API
- Глава 20. Web Socket API и Server-Sent Events
- Глава 21. Локализация
- Глава 22. Модули
- Глава 23. Canvas API
- Глава 24. IndexDB API
- Глава 25. Drag-and-Drop API
- Глава 26. File API
- Глава 27. Web Worker API
- Глава 28. Дополнительные Web API
- Глава 29. Дополнительные статьи