В JavaScript существует большое количество событий, которые помогают разработчикам реагировать на взаимодействие пользователей с веб-страницами. Эти события могут происходить при взаимодействии с элементами интерфейса, клавиатурой, мышью, а также при изменении состояния самого документа или окна браузера. Рассмотрим основные категории событий и приведем примеры их использования.
1. События мыши
События мыши происходят, когда пользователь взаимодействует с веб-страницей с помощью курсора мыши.
click
Происходит, когда пользователь нажимает и отпускает кнопку мыши на элементе.
Пример:
document.querySelector('button').addEventListener('click', function(event) {
console.log('Кнопка была нажата.');
});dblclick
Происходит, когда пользователь дважды быстро нажимает на элемент.
Пример:
document.querySelector('p').addEventListener('dblclick', function(event) {
console.log('Дважды кликнули на абзац.');
});mouseenter / mouseleave
Происходят, когда курсор мыши входит в область элемента (mouseenter) и выходит из неё (mouseleave).
Пример:
document.querySelector('div').addEventListener('mouseenter', function(event) {
console.log('Курсор вошел в div.');
});
document.querySelector('div').addEventListener('mouseleave', function(event) {
console.log('Курсор вышел из div.');
});mousedown / mouseup
Происходят, когда кнопка мыши нажимается (mousedown) и отпускается (mouseup).
Пример:
document.querySelector('button').addEventListener('mousedown', function(event) {
console.log('Кнопку начали нажимать.');
});
document.querySelector('button').addEventListener('mouseup', function(event) {
console.log('Отпустили кнопку.');
});mousemove
Происходит каждый раз, когда курсор мыши перемещается над элементом.
Пример:
document.addEventListener('mousemove', function(event) {
console.log('Координаты курсора: ', event.clientX, event.clientY);
});2. Клавиатурные события
Клавиатурные события происходят, когда пользователь взаимодействует с клавиатурой.
keydown / keyup
Происходят, когда клавиша нажимается (keydown) и отпускается (keyup).
Пример:
document.addEventListener('keydown', function(event) {
console.log('Нажали клавишу:', event.key);
});
document.addEventListener('keyup', function(event) {
console.log('Отпустили клавишу:', event.key);
});keypress
Происходит, когда пользователь нажимает любую клавишу, генерирующую символ (например, буквы, цифры). Не срабатывает для функциональных клавиш, таких как Shift, Ctrl и т.д.
Пример:
document.addEventListener('keypress', function(event) {
console.log('Символ:', String.fromCharCode(event.charCode));
});3. События формы
События формы происходят, когда пользователь взаимодействует с элементами форм, такими как текстовые поля, чекбоксы, радиокнопки и другие элементы ввода.
submit
Происходит, когда форма отправляется пользователем.
Пример:
document.querySelector('form').addEventListener('submit', function(event) {
event.preventDefault(); // Предотвращаем отправку формы
console.log('Форма была отправлена.');
});change
Происходит, когда изменяется состояние элемента формы (например, выбран новый пункт в выпадающем списке или установлен/снят чекбокс).
Пример:
document.querySelector('select').addEventListener('change', function(event) {
console.log('Изменено значение выпадающего списка:', event.target.value);
});focus / blur
Происходят, когда элемент получает фокус (focus) и теряет его (blur).
Пример:
document.querySelector('input').addEventListener('focus', function(event) {
console.log('Поле получило фокус.');
});
document.querySelector('input').addEventListener('blur', function(event) {
console.log('Поле потеряло фокус.');
});4. События окна/документа
Эти события связаны с состоянием окна браузера или самого документа.
load
Происходит после полной загрузки всех ресурсов страницы (включая изображения, стили и скрипты).
Пример:
window.addEventListener('load', function(event) {
console.log('Страница полностью загружена.');
});DOMContentLoaded
Происходит, когда структура DOM полностью построена, но до завершения загрузки всех внешних ресурсов (изображения, стили и т.п.).
Пример:
document.addEventListener('DOMContentLoaded', function(event) {
console.log('DOM готов к использованию.');
});resize
Происходит, когда размер окна браузера меняется.
Пример:
window.addEventListener('resize', function(event) {
console.log('Размер окна изменён.', window.innerWidth, window.innerHeight);
});scroll
Происходит, когда содержимое окна или элемента прокручивается.
Пример:
window.addEventListener('scroll', function(event) {
console.log('Прокручено на:', window.scrollY, 'px');
});5. События касания (Touch Events)
Эти события используются для работы с сенсорными экранами.
touchstart / touchend
Происходят, когда палец касается экрана (touchstart) и отрывается от него (touchend).
Пример:
document.addEventListener('touchstart', function(event) {
console.log('Прикоснулись к экрану.');
});
document.addEventListener('touchend', function(event) {
console.log('Отпустили экран.');
});touchmove
Происходит, когда палец движется по экрану.
Пример:
document.addEventListener('touchmove', function(event) {
console.log('Перемещаемся по экрану.');
});Заключение
События в JavaScript предоставляют мощные инструменты для взаимодействия с пользователями и реагирования на их действия. Правильное использование этих событий помогает создавать удобные и интуитивно понятные веб-интерфейсы.
Загрузка...