Синтаксис JavaScript Справочник JavaScript JSON Коды клавиш События Строгий режим

JavaScript: События

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

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

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

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

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

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

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

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

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

В этой модели событие возникает у наиболее конкретного элемента (самого вложенного), а затем поднимается по иерархии до наименее конкретного узла. Всплытие продолжается до объекта 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 будет возникать в следующем порядке:

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

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011-2018 © puzzleweb.ru

Реклама на сайте | puzinfo@puzzleweb.ru