«Единственный способ творить великие дела – это любить то, что ты делаешь»
JavaScript


Игра на «Морской Бой» на JavaScript: Простая Игра и Игра для Двоих


Всплытие событий - это когда обработчик сначала срабатывает на самом вложенном элементе, затем на родительском (если у него тоже есть обработчик). И так далее по цепочке вложенности элементов.

Используя свойство 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.



Читайте также...



Отзывы и комментарии:

Комментариев нет...

Оставить отзыв:

Ваше Имя:

Текст комментария:

Ответьте на вопрос:

Сколько дней в Високосном году?


Рунет - Часть 4
Помощь сайту
Yandex-деньги/Ю-Money
410011236419322
Перевод на карту СБ
4276 1300 1671 5819
WebMoney
R711879515665 Z861169301432

Тематические публикации
Популярные заметки
Последние заметки