JavaScript. Подробное руководство, 6-е издание, Флэнаган Дэвид

JavaScript. Подробное руководство, 6-е издание

на обложку

Флэнаган Дэвид

Шрифт:

Также важно значение, возвращаемое обработчиком

onbefоreunload

объекта

Window

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

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

addEventListener

или

attachEvent

вместо этого должны вызывать метод

preventDefault

или устанавливать свойство

returnValue

объекта события.

17.3.5. Порядок вызова

Для элемента документа или другого объекта можно зарегистрировать более одного обработчика одного и того же типа события. При возникновении этого события броузер вызовет все обработчики в порядке, определяемом следующими правилами:

• В первую очередь вызываются обработчики, зарегистрированные установкой свойства объекта или с помощью HTML-атрибута, если таковые имеются.

• Затем вызываются обработчики, зарегистрированные с помощью метода addEventListener, в порядке их регистрации. [45]

Стандарт «DOM Level 2» не определяет порядок вызова обработчиков, но все текущие броузеры вызывают обработчики в порядке их регистрации, а текущий проект стандарта «DOM Level 3» определяет именно такой порядок вызова.

• Обработчики, зарегистрированные с помощью метода

attachEvent,

могут вызываться в произвольном порядке, поэтому ваши сценарии не должны полагаться на какой-то определенный порядок.

17.3.6. Распространение событий

Когда целью события является объект

Window

или какой-то другой самостоятельный объект (такой как

XMLHttpRequest

), броузер откликается на событие простым вызовом соответствующего обработчика в этом объекте. Однако когда целью события является объект

Document

или элемент

Element

документа, ситуация несколько осложняется.

После вызова обработчиков событий, зарегистрированных в целевом элементе, большинство событий «всплывают» вверх по дереву DOM. В результате вызываются обработчики в родителе целевого элемента. Затем вызываются обработчики, зарегистрированные в родителе родителя целевого элемента. Так продолжается, пока не будет достигнут объект

Document

и затем объект

Window

. Способность событий всплывать обеспечивает возможность реализации альтернативы множеству обработчиков, зарегистрированных в отдельных элементах документа: можно зарегистрировать единственный обработчик в общем элементе-предке и обрабатывать события в нем. Например, вместо того чтобы регистрировать обработчик события «change» в каждом элементе формы, его можно зарегистрировать в единственном элементе

<form>

Способностью всплывать обладает большинство событий, возникающих в элементах документа. Заметным исключением являются события «focus», «blur» и «scroll». Событие «load», возникающее в элементах, также всплывает, но оно прекращает всплывать в объекте

Document

и не достигает объекта

Window

. Событие «load» в объекте

Window

возбуждается, только когда будет загружен весь документ.

Всплытие - это третья «фаза» распространения события. Вызов обработчика события в целевом объекте - это вторая фаза. Первая фаза протекает еще до вызова обработчиков целевого объекта и называется фазой «перехвата». Напомню, что метод

addEventListener

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

обработчик для вызова в первой фазе распространения события. Фаза всплытия событий реализована во всех броузерах, включая IE, и в ней участвуют все обработчики, независимо от того, как они были зарегистрированы (если только они не были зарегистрированы как перехватывающие обработчики). В фазе перехвата, напротив, участвуют только обработчики, зарегистрированные с помощью метода

addEventListener,

когда в третьем аргументе ему было передано значение true. Это означает, что фаза перехвата событий недоступна в IE версии 8 и ниже, и на момент написания этих строк имела ограничения в использовании.

Фаза перехвата напоминает фазу всплытия, только событие распространяется в обратном направлении. В первую очередь вызываются перехватывающие обработчики объекта

Window

, затем вызываются перехватывающие обработчики объекта

Document

, затем обработчики объекта

body

и так далее, вниз по дереву DOM, пока не будут вызваны перехватывающие обработчики родителя целевого объекта. Перехватывающие обработчики, зарегистрированные в самом целевом объекте, не вызываются.

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

17.3.7. Отмена событий

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

addEventListener,

отменить выполнение действий по умолчанию можно также вызовом метода

рreventDefault

объекта события. Однако в IE, версии 8 и ниже, тот же эффект достигается установкой свойства

returnValue

объекта события в значение false. В следующем фрагменте демонстрируется обработчик вымышленного события, который использует все три способа отмены события:

function cancelHandler(event) {

var event = event || window.event; // Для IE

/* Здесь выполняется обработка события */

// Теперь отменить действие по умолчанию, связанное с событием

if (event.preventDefault) event.preventDefault; // Стандартный прием

if (event.returnValue) event.returnValue = false; // IE

return false; // Для обработчиков, зарегистрированных как свойства

}

Текущий проект модуля «DOM Events» определяет в объекте Event свойство с именем

defaultPrevented

. Оно пока поддерживается не всеми броузерами, но суть его в том, что при обычных условиях оно имеет значение false и принимает значение true только в случае вызова метода

preventDefault.

[46]

Объект события, определяемый в библиотеке jQuery (глава 19), вместо свойства имеет метод defaultPrevented.