Готовлюсь к собеседованиям и систематизирую знания. Разбираем фазы распространения события в js.

Когда в каком-то объекте происходит событие, оно распространяется в документе по определённым правилам. События распространяются в две стороны: от корневого элемента (window) к целевому, и обратно.Распространение события делится на 3 фазы: - фаза погружения – от window к цели(цель – это объект, в котором возникло событие). - фаза цели – когда событие достигает целевого элемента. - фаза всплытия – обратно, от цели к window.

Фаза всплытия на простом примере. Для простоты, используем атрибут onclick для задания обработчика события клика (скрин ниже) При клике по элементу будет поочередно показано три сообщения —"p", "div" и "body", несмотря на то, что клик был только по элементу p. Этот пример демонстрирует всплытие, то есть распространение события от внутреннего элемента к родительским.

Цель это когда событие достигает целевого элемента (того, на котором оно произошло, например,кнопки, по которой кликнули), наступает фаза цели. Но важно понимать, что насамом деле эта "фаза" — это просто момент времени.

Фаза погружения - редко используется на практике. Чтобы "поймать" событие на стадии погружения, нужно добавить обработчик события с помощью метода addEventListener() и добавить в него третий параметр со значением true(предположим, что элементы body, div и p> уже найдены):

body.addEventListener("click", () =>alert("body"),true); div.addEventListener("click", () =>alert("div"),true); p.addEventListener("click", () =>alert("p"), true);

В этом случае при клике по внутреннему элементу будет сначала отображено сообщение "body", затем "div" и только в конце"p", то есть в обратном порядке по сравнению с фазой всплытия

#JavaScript #JuniorFrontend #Собеседование #ВопросыНаСобес #войтивайти #frontenddevelopment