JavaScript с нуля

Знакомьтесь с фазами

Важно заметить, что не имеет значения, где в DOM инициируется событие. Оно всегда начинает движение от корня, спускается вниз до встречи с целью, а затем возвращается к корню. Этот путь имеет официальное определение, поэтому давайте рассмотрим его с этой позиции.

Часть, в которой вы инициируете событие и оно, начиная с корня, совершает спуск вниз по DOM, называется фазой погружения события.

Менее продвинутые люди иногда называют его фаза 1, так что имейте в виду, что в реальной жизни вы будет встречать верное название вперемешку с названием фазы. Следующей будет фаза 2, во время которой событие всплывает обратно к корню.

Эта фаза также известна как фаза всплытия события.

Как бы то ни было, но всем элементам на пути события в некотором смысле повезло. Судьба наградила их возможностью двойного уведомления при срабатывании события. Это может повлиять на код, который вы пишете, так как каждый раз, когда мы прослушиваем события, решаем, в какой фазе нужно это делать. Слушаем ли мы событие во время его спуска в фазе погружения или же тогда, когда оно взбирается обратно в фазе всплытия?

Выбор фазы — это тонкая деталь, которую вы определяете с помощью true или false в вызове addEventListener:

item.addEventListener("click", doSomething, true);

Если вы помните, в предыдущей главе я вскользь упомянул третий аргумент — addEventListener. Этот аргумент указывает, хотите ли вы прослушивать событие во время фазы погружения. В этом смысле значение true означает, что именно так вы и хотите. И наоборот, аргумент false будет означать, что нужно прослушивать событие во время фазы всплытия.

Чтобы прослушивать его в обеих фазах, можно сделать следующее:

item.addEventListener("click", doSomething, true);

item.addEventListener("click", doSomething, false);

Я не могу представить, зачем вам это может понадобиться, но если вдруг понадобится, вы знаете, что делать.

не указана фаза

Можно возмутиться и вообще не указывать этот третий аргумент для фазы:

item.addEventListener("click", doSomething);

Если вы не укажете третий аргумент, то поведением по умолчанию будет прослушивание вашего события во время фазы восходящей цепочки. Это эквивалентно передаче в качестве аргумента ложного значения.