JavaScript: События

Регистрация обработчиков событий
Распространение событий
Всплытие событий
Перехват событий

Событие – это то, что произошло или происходит. Например, браузер генерирует событие, когда завершается загрузка документа, когда пользователь водит курсором мыши по веб-странице или нажимает клавишу на клавиатуре.

Регистрация обработчиков событий

У любого события есть цель события. Цель события (или целевой объект) – это объект, в котором возникло событие или с которым это событие связано.

Для любого события можно зарегистрировать функцию (одну или более), которая будет автоматически вызываться браузером при возникновении события. Функция, которая используется для обработки события, называют слушателем события или обработчиком события.

Обработчик события регистрируется у целевого объекта. Зарегистрировать обработчик события можно тремя способами:

Используя метод addEventListener() у целевого объекта:
```
elem.addEventListener("click", foo, false);
```
Присвоив обработчик свойству объекта, являющегося целью события:
```
elem.onclick = foo;
```
Зарегистрировать обработчик события можно присвоив свойству целевого объекта желаемую функцию. Свойства, которым присваиваются обработчики имеют имена, начинающиеся с приставки "on", за которой следует имя события: click, change и т. д.:
```
window.onload = function () {
  alert("Страница полностью загружена!");
}
```
Указать обработчик в качестве значения атрибута целевого HTML-элемента:
```
<div onclick="foo()"></div>
```

Распространение событий

Распространение событий – это модель, в которой определяется, где наступает событие и как оно распространяется.

Всего есть две модели распространения событий. Первая модель называется "всплытие событий", вторая – "перехват событий".

Всплытие событий

В этой модели событие возникает у наиболее конкретного элемента (самого вложенного), а затем поднимается по иерархии до наименее конкретного узла. Всплытие продолжается до объекта window.

Рассмотрим код следующей веб-страницы:

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Название веб-страницы</title>
</head>
<body>

  <div style="background: red; height: 100px; width: 100px;"></div>

<script>
"use strict";
let div = document.querySelector('div');
let body = document.querySelector('body');
let html = document.querySelector('html');

div.addEventListener("click", function () { alert('div'); }, false);
body.addEventListener("click", function () { alert('body'); }, false);
html.addEventListener("click", function () { alert('html'); }, false);
document.addEventListener("click", function () { alert('document'); }, false);
window.addEventListener("click", function () { alert('window'); }, false);
</script>

</body>
</html>

Попробовать »

Если кликнуть по элементу <div>, событие click будет возникать в следующем порядке:

Всплытие событий

Перехват событий

В этой модели событие возникает у наименее конкретного узла (объекта window), а затем спускается по иерархии до наиболее конкретного элемента.

Рассмотрим код следующей веб-страницы:

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Название веб-страницы</title>
</head>
<body>

  <div style="background: red; height: 100px; width: 100px;"></div>

<script>
"use strict";
let div = document.querySelector('div');
let body = document.querySelector('body');
let html = document.querySelector('html');

div.addEventListener("click", function () { alert('div'); }, true);
body.addEventListener("click", function () { alert('body'); }, true);
html.addEventListener("click", function () { alert('html'); }, true);
document.addEventListener("click", function () { alert('document'); }, true);
window.addEventListener("click", function () { alert('window'); }, true);
</script>

</body>
</html>

Попробовать »

Если кликнуть по элементу <div>, событие click будет возникать в следующем порядке:

Перехват событий