В этом руководстве вы узнаете о событиях JavaScript, моделях событий и о том, как обрабатывать события.
Событие — это действие, происходящее в веб-браузере, которое он возвращает, чтобы вы могли на него отреагировать.
Например, когда пользователи нажимают кнопку на веб-странице, вы можете отреагировать на это событием
click, отобразив диалоговое окно.
Каждое событие может иметь обработчик события, представляющий собой блок кода, который будет выполняться при возникновении события.
Обработчик событий также известен как прослушиватель событий. Он прослушивает событие и выполняется, когда событие происходит.
Предположим, у вас есть кнопка с идентификатором btn :
<button id="btn">Click Me!</button>
Чтобы определить код, который будет выполняться при нажатии кнопки, вам необходимо зарегистрировать обработчик события с помощью addEventListener() :
let btn = document.querySelector('#btn');
function display() {
alert('It was clicked!');
}
btn.addEventListener('click',display);Как это работает.
- Сначала выберите кнопку с идентификатором
btn, используя методquerySelector(). - Затем определите функцию
display()в качестве обработчика событий. - Наконец, зарегистрируйте обработчик событий с помощью
addEventListener(), чтобы при нажатии пользователем кнопки выполнялась функцияdisplay().
Более короткий способ зарегистрировать обработчик событий — поместить весь код в анонимную функцию, например:
let btn = document.querySelector('#btn');
btn.addEventListener('click',function() {
alert('It was clicked!');
});Поток событий
Предположим, что у вас есть следующий HTML-документ:
<!DOCTYPE html>
<html>
<head>
<title>JS Event Demo</title>
</head>
<body>
<div id="container">
<button id='btn'>Click Me!</button>
</div>
</body>Когда вы нажимаете кнопку, вы нажимаете не только кнопку, но и контейнер кнопки, div и всю веб-страницу.
Поток событий объясняет порядок, в котором события получаются на странице от элемента, в котором происходит событие, и распространяются по дереву DOM.
Существуют две основные модели событий: всплывающее окно и захват событий.
Всплывающие события
В модели всплывающих событий событие начинается с наиболее специфичного элемента, а затем перемещается вверх к наименее специфичному элементу ( document или даже window ).
Когда вы нажимаете кнопку, событие click происходит в следующем порядке:
- кнопка
- div с контейнером id
- тело
- HTML
- документ
Событие click сначала происходит на кнопке, которая является элементом, который был нажат. Затем событие click идет вверх по дереву DOM, срабатывая на каждом узле на своем пути, пока не достигнет объекта document.
На следующем рисунке показан эффект всплывающей всплывающей подсказки, когда пользователи нажимают кнопку:
Обратите внимание, что современные веб-браузеры поднимают событие до объекта window.
Захват событий
В модели захвата событий событие начинается с наименее специфичного элемента и течет вниз к наиболее специфичному элементу.
Когда вы нажимаете кнопку, событие click происходит в следующем порядке:
- документ
- HTML
- тело
- div с контейнером id
- кнопка
На следующем рисунке показан эффект захвата событий:
Поток событий уровня 2 DOM
События уровня DOM 2 указывают, что поток событий состоит из трех фаз:
- Сначала происходит захват события, что дает возможность перехватить событие.
- Затем фактическая цель получает событие.
- Наконец, происходит всплытие событий, что позволяет дать окончательный ответ на событие.
На следующем рисунке показана модель события DOM Level 2, когда пользователи нажимают кнопку:
Объект Event
Когда происходит событие, веб-браузер передает объект Event обработчику события:
let btn = document.querySelector('#btn');
btn.addEventListener('click', function(event) {
console.log(event.type);
});Выход:
'click'
В следующей таблице показаны наиболее часто используемые свойства и методы объекта event :
| Свойство/метод | Описание |
|---|---|
| bubbles | true, если событие всплывает |
| cancelable | true, если поведение события по умолчанию можно отменить |
| currentTarget | текущий элемент, на котором срабатывает событие |
| defaultPrevented | вернуть true, если была вызвана функция preventDefault(). |
| detail | больше информации о мероприятии |
| eventPhase | 1 на фазу захвата, 2 на цель, 3 на bubbling |
| preventDefault() | отменить поведение по умолчанию для события. Этот метод эффективен только в том случае, если свойство cancelable имеет значение true. |
| stopPropagation() | отмените любой дальнейший захват событий или всплывающую подсказку. Этот метод можно использовать только в том случае, если свойство bubbles равно true. |
| target | целевой элемент события |
| type | тип события, которое было запущено |
Обратите внимание, что объект event доступен только внутри обработчика событий. После выполнения всех обработчиков событий объект события автоматически уничтожается.
Метод preventDefault()
Чтобы предотвратить поведение события по умолчанию, используйте метод preventDefault().
Например, когда вы щелкаете ссылку, браузер перенаправляет вас на URL-адрес, указанный в атрибуте href :
<a href="https://www.javascripttutorial.net/">JS Tutorial</a>
Однако вы можете предотвратить такое поведение, используя метод preventDefault() объекта event :
let link = document.querySelector('a');
link.addEventListener('click',function(event) {
console.log('clicked');
event.preventDefault();
});Обратите внимание, что метод preventDefault() не препятствует тому, чтобы событие всплыло в DOM. И событие может быть отменено, когда его свойство cancelable равно true.
Метод stopPropagation()
Метод stopPropagation() немедленно останавливает поток события через дерево DOM. Однако это не останавливает поведение браузера по умолчанию.
См. следующий пример:
let btn = document.querySelector('#btn');
btn.addEventListener('click', function(event) {
console.log('The button was clicked!');
event.stopPropagation();
});
document.body.addEventListener('click',function(event) {
console.log('The body was clicked!');
});
Без stopPropagation() вы бы увидели два сообщения в окне консоли.
Однако событие click никогда не достигает body, поскольку в обработчике события click кнопки была вызвана stopPropagation().
Заключение
- Событие — это действие, происходящее в веб-браузере, например щелчок мышью.
- Поток событий имеет две основные модели: пузырьковое распространение событий и захват событий.
- DOM Level 2 Event указывает, что поток событий состоит из трех фаз: всплывающая подсказка, событие происходит в определенном элементе и захват события.
- Используйте
addEventListener()для регистрации события, которое связывает событие с прослушивателем событий. - Объект
eventдоступен только в прослушивателе событий. - Используйте
preventDefault(), чтобы предотвратить поведение события по умолчанию, но не останавливать поток событий. - Используйте
stopPropagation(), чтобы остановить поток события через дерево DOM, но он не отменяет поведение браузера по умолчанию