Всплытие и погружение событий

Тарасов, GB

by shurikation

JavaScript

//Есть структура HTML: div, внутри которого section, внутри которого p
//Есть код:

const elements = document.querySelectorAll('#myDiv, #mySection, #myP);

const handler =  function() {
	alert(`Событие происходит в теге: ${this.tagName}`)
};

//По клику запустится функция handler
for (const element of elements) {
	element.addEventListener('click', handler);
  element.addEventListener('click', () => alert('Hi!')); //вариант записи стрелочной функции
}

//Если кликнуть на p, то событие с alert отработает на <p>, потом на section, потом на div - т.е. СОБЫТИЕ ВСПЛЫВАЕТ.

//Но перед этим сначала событие ПОГРУЖАЕТСЯ - идет от родителя к целевому элементу, по которму прошел клик. Начиная с объекта window, потом document, html, dody, div, section, p. Но после - всплывает в обратном порядке.

//По умолчанию событие ловится на ВСПЛЫТИИ - т.е. вот этот код при клике на тэг <р> сработает на p, section, а потом на div. Но можно ловить и на ПОГРУЖЕНИИ, для этого надо установить true:

for (const element of elements) {
	element.addEventListener('click', handler, true); //по умолчанию - false
}

//В таком случае мы увидем ПОГРУЖЕНИЕ: div -> section -> p, но после тут же начнется ВСПЛЫТИЕ: p -> section -> div. По умолчанию - будет только ВСПЛЫТИЕ.

//Очень редко когда ловят на ПОГРУЖЕНИИ. Крайне редко. Но события всегда сначала ПОГРУЖАЮТСЯ, а потому ВСПЛЫВАЮТ.

//Параметр event 
const handler2 =  function(event) {
	console.log(event);
};
//По клику получим MouseEvent. В нем много свойств, положения по X Y, были ли зажаты кнопки и т.д. В том числе:
//target - это элемент, по которому был клик.


const handler2 =  function() {
	alert(`Событие происходит в теге: ${this.tagName}`) //this - элемент, который мы сейчас обрабатываем, элемент на котором обрабатывается собтие.
};

event.target.tagName //лежит элемент, на котором произошло событие т.е.
this.tagName //лежит элемент т.е. <блок>, который мы сейчас обрабатываем и он может меняться

//При клике на div - и там и там будет div. Но...