Page 300 - Браун Э. - Изучаем JavaScript. Руководство по созданию современных веб-сайтов - 2017

evt . preventDefault ( ) ;
highlightParas ( a . d ataset . containing) ;
} ) i

const removeHighlightActions =
document . q uerySelectorAll ( ' [ d ata-action=" removeHighlight " ] ' ) ;
s
for ( l et а of removeHighlightActions ) {
k
a . addEventListener ( ' clic ' , evt => {
evt . preventDefault ( ) ;
removeParaHighlights ( ) ;
} ) i

У каждого элемента есть метод addEventListener, который позволяет определять
функцию, вызываемуiо, когда происходит указанное событие. Этой функции пере­
дается один аргумент - объект типа Event. Объект события содержит всю необхо­
димую информацию о событии, которая специфична для данного типа события. На­
пример, событие click будет иметь свойства clientX и clientY, которые указывают
координаты, где произошел щелчок кнопкой мыши, а также свойство target - эле­
мент, для которого событие click было сгенерировано.
Модель событий спроектирована так, чтобы несколько обработчиков могли об­
рабатывать одно и то же событие. У многих событий есть стандартные обработчики;
например, если пользователь щелкает на ссылке <а>, то браузер обработает это со­
бытие, загрузив нужную страницу. Если вы хотите предотвратить такое поведение,
вызовите метод preventDefault ( ) для объекта события. В большинстве обработчи­
ков событий, которые вы пишете, нужно вызывать метод preventDefaul t ( ) (если
только вы не хотите добавить нечто к стандартному обработчику).
Для выделения текстового абзаца в нашем примере вызывается функция
highli g htParas, которой передается значение элемента данных containing кноп­
ки: это позволяет оперативно изменять выделяемое слово, просто отредактировав
НТМL-код!

Перехват и всплытие соб ы тий
Поскольку НТМL-документ имеет иерархический характер, события могут быть
обработаны в нескольких местах. Например, если вы щелкаете на кнопке, то событие
могла бы обработать сама кнопка, родитель кнопки, родитель родителя и т.д. По­
скольку обработать событие могут несколько элементов, возникает вопрос "В каком
порядке элементы получают возможность отреагировать на событие?"
По существу, есть две возможности. Первая - в предке начиная с самого даль­
него. Это так называемый перехват (capturing) события. В нашем примере кнопки
n
являются дочерними для элемента <div id="conte t " > , который, в свою очередь,

События 303