«Единственный способ творить великие дела – это любить то, что ты делаешь»
JavaScript
site.komp36.ru Создание сайтов. Твой сайт фотографа Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Продающий лендинг. Создание сайтов Установка и продажа окон, установка дверей, перегородок. Одностраничный продающий сайт. Заявки прямо с сайта
site.komp36.ru Универсальный лендинг. Выбрать тему для сайта! Лендинг адаптируется под любую тему: ремонт, отделка, продажа окон, дверей, лестниц, мебели и многое другое
site.komp36.ru Создание сайтов. Сайт сервисного центра. Сайт компании. Новости и отзывы. Несколько прайс-листов – под каждый отдельная страница. Возможность размещения статей


Игра «Морской Бой» на 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.

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

site.komp36.ruТвой сайт фотографа. Создание сайтов Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Акция Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Акция Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта

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

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

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

Ваше Имя:

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

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

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


Рунет - Часть 4
Тематические публикации
site.komp36.ru Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта
Популярные заметки
Последние заметки