Page 301 - Браун Э. - Изучаем JavaScript. Руководство по созданию современных веб-сайтов - 2017
P. 301
является дочерним для <body>. Поэтому у элемента <body> есть возможность пере
хватывать события, исходящие от кнопок.
Вторая возможность начинается с элемента, где событие произошло, а затем
вверх по иерархии, чтобы у всех предков был шанс отреагировать. Это так называе
мое всплытие (bubЬling) событий.
Для поддержки обоих возможностей распространение событий в HTMLS начи
нается с разрешения обработчикам перехватывать события (начиная с самого даль
него предка и вниз к исходному (target) элементу), а затем события всплывают вверх
от исходного элемента к самому дальнему предку.
Для обеспечения возможности вызова дополнительных обработчиков любой об
работчик может опционально предпринять одно из трех действий. Первое и наибо
лее распространенное, которое мы уже видели, - это вызов метода preventDefaul t,
который отменяет событие. Отмененные события продолжают распространяться,
но их свойство defaultPrevented устанавливается равным true. Встроенные в бра
узер обработчики событий проверяют значение свойства defaultPrevented и, если
оно истинно, ничего не предпринимают. Обработчики событий, которые вы пишете,
могут проигнорировать значение этого свойства (и обычно так и делают). Второй
подход подразумевает вызов метода s t o pPropagation, что предотвращает даль
нейшее распространение события за текущий элемент. При этом все обработчики,
связанные с текущим элементом, будут вызваны, но никакие из обработчиков, свя -
занные с другими элементами, не вызываются. И наконец (крупный калиб р) вызов
метода stopimmediatePropagat i o n запретит вызов дальнейших о б работчиков (даже
если они связаны с текущим элементом.
Для демонстрации всех этих действий рассмотрим следующий НТМL-код.
< ! doctype html>
<html>
<head>
<titlе>Распространение событий</titlе>
<meta charset="ut f-8 " >
< / head>
<body>
<div>
<Ьuttоn>Щелкни здecь ! < /button>
</div>
<script>
11 это создаст обработчик событий и возвратит его
t
e
func i o n logEvent (handlerName , t y pe , canc l ,
p
sto , stopimmedia e ) {
t
1 1 это фактический обработчик событий
return function ( e vt ) {
e
if ( c anc l ) evt . preventDefault ( ) ;
i f ( s top) evt . s topPropagation ( ) ;
304 Глава 8 . JavaScript в браузере
1
