Далее на странице...
Всплытие событий - это когда обработчик сначала срабатывает на самом вложенном элементе, затем на родительском (если у него тоже есть обработчик). И так далее по цепочке вложенности элементов.
Используя свойство event.currentTarget мы наглядно увидим, как событие всплывает наверх.
Всплытие событий - Свойство event.target
HTML-код
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Overlay - target</title>
<link rel="stylesheet" href="css.css">
</head>
<body>
<div class="overlay">
<button id="btn">Нажми меня 1</button>
</div>
<button>Нажми меня 2</button>
<button>Нажми меня 3</button>
<a href="https://www.youtube.com/">https://www.youtube.com/</a>
<script src="script.js"></script>
</body>
</html>
JavaScript-код
'use strict';
// Доступ к родительскому и дочернему элементам
const overlay = document.querySelector('.overlay'),
btn = document.querySelector('button');
// Функция-обработчик
const deleteElement = (event) => {
console.log(event.target); // Элемент для которого было назначено событие
console.log(event.type); // Тип события
}
// Назначаем событие и обработчик для элементов
btn.addEventListener('click', deleteElement);
overlay.addEventListener('click', deleteElement);
Результат в Браузере
Результат в консоли
<button id="btn">Нажми меня 1</button>
click
<button id="btn">Нажми меня 1</button>
click
В консоли мы получаем 2 результата работы функции-обработчика: обработчик событий сначала сработал на вложенном элементе, затем на родительском. Это и называется всплытие событий.
В данном примере в обоих случаях в консоль выводится event.target и оба раза мы видим, что это элемент страницы, на котором событие произошло изначально. О свойстве event.target читайте здесь.
Всплытие событий - Свойство event.currentTarget
Свойство event.currentTarget используется, когда один и тот же обработчик события присваивается нескольким элементам.
Свойство event.currentTarget всегда совпадает с элементом, для которого было назначено событие.
Продолжим работать с предыдущим примером и посмотрим, как работает свойство event.currentTarget.
JavaScript-код
'use strict';
// Доступ к родительскому и дочернему элементам
const overlay = document.querySelector('.overlay'),
btn = document.querySelector('button');
// Функция-обработчик
const deleteElement = (event) => {
console.log(event.currentTarget); // Всегда совпадает Элементом, для которого было назначено событие
console.log(event.type); // Тип события
}
// Назначаем событие и обработчик для элементов
btn.addEventListener('click', deleteElement);
overlay.addEventListener('click', deleteElement);
Результат в Браузере
Результат в консоли
<button id="btn">Нажми меня 1</button>
click
<div class="overlay">
<button id="btn">Нажми меня 1</button>
</div>
click
Со свойством event.currentTarget ситуация иная: из результата в консоли видно, что событие сначала произошло на вложенном элементе. И далее видно, что событие click также произошло и на родительском элементе.
Этот пример показывает, как событие всплывает наверх. Здесь была продемонстрирована ключевая разница между свойствами event.target и event.currentTarget.
