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

t
i f ( stopirnmedia e ) evt . s topirnmediatePropagation ( ) ;
g
console . l o ( ' $ { t yp } : $ { handlerName } ' +
e
( e vt . defaultPrevented ? ' ( о тменен ) ' : ' ' ) ) ;
о
1 1 это добавляет регистратор события к элементу
function addEventLogger ( e l t , t y pe , action) {
const capture = t y pe === ' c apture ' ;
k
elt . addEventLis e ner ( ' c lic ' ,
t
logEvent ( e lt . tagName , type , action=== ' c ancel ' ,
p
p
r
action== ' s to ' , action=== ' s to ! ' ) , captu e ) ;
=
const body = document . q uerySelector ( ' bod ' ) ;
y
const div = document . querySelector ( ' div ' ) ;
const button = document . querySelector ( ' butto ' ) ;
n
addEventLogger ( b ody, ' c apture ' ) ;
addEventLogger ( b ody, ' Ь uЬЫе ' ) ;
addEventLogger ( d iv, ' c apture ' ) ;
addEventLogger ( d iv, ' Ь uЬЫе ' ) ;
addEventLogger ( b utton, ' c apture ' ) ;
addEventLogger ( b utton , ' Ь uЬЫе ' ) ;

</script>
< / body>
</html>
Щелкнув на кнопке, вы увидите на консоли следующее.
capture : BODY
capture : DIV
capture : BUTTON
ЬuЬЫе : BUTTON
ЬuЬЫе : DIV
ЬuЬЫе : BODY

Здесь мы ясно видим процесс перехвата событий, сопровождаемый их всплыти­
ем. Обратите внимание, что обработчики элемента, на котором фактически произо­
шло событие, будут вызваны в порядке их добавления, будь то перехват или распро­
странение события (если мы изменим на обратный порядок, в котором мы добавля­
ли обработчики перехвата и всплытия событий, мы увидим, что всплытие следует
перед перехватом).
Рассмотрим, что произойдет при отмене распространения события. Изменим
пример так, чтобы отменить распространение при перехвате события в <di v>.
addEventLogger (body, ' c apture ' ) ;
addEventLogger ( b ody, ' Ь uЬЫе ' ) ;