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

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

на обложку

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

Шрифт:

// Здесь находится реализация обработчика

}

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

attachEvent,

но они также могут использовать переменную

window.event

В разделе 17.2.2 говорилось, что при регистрации обработчика события посредством HTML-атрибута броузер преобразует строку с программным кодом на языке JavaScript в функцию. Броузеры, отличные от IE, создают функцию с единственным аргументом

event

. В IE создается функция, не принимающая аргументов. Если в таких функциях использовать идентификатор

event

, он будет ссылаться на

window.event

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

event

17.3.2. Контекст обработчиков событий

Когда обработчик событий регистрируется установкой свойства, это выглядит как определение нового метода элемента документа:

e.onclick = function { /* реализация обработчика */ };

Поэтому нет ничего удивительного, что обработчики событий вызываются (с одним исключением, касающимся IE, которое описывается ниже) как методы объектов, в которых они определены. То есть в теле обработчика событий ключевое слово

this

ссылается на цель события.

В обработчиках ключевое слово

this

ссылается на целевой объект, даже когда они были зарегистрированы с помощью метода

addEventListener.

Однако, к сожалению, это не относится к методу

attachEvent

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

attachEvent,

вызываются как функции, и в них ключевое слово

this

ссылается на глобальный (

Window

) объект. Эту проблему можно решить следующим способом:

* Регистрирует указанную функцию как обработчик событий указанного типа в указанном

* объекте. Гарантирует, что обработчик всегда будет вызываться как метод целевого объекта.

function addEvent(target, type, handler) {

if (target.addEventListener)

target.addEventListener(type, handler, false);

else

target.attachEvent(“on" + type,

function(event) {

// Вызвать обработчик как метод цели,

// и передать ему объект события

return handler.call(target, event);

});

}

Обратите внимание, что обработчики событий, зарегистрированные таким способом, нельзя удалить, потому что ссылка на функцию-обертку, передаваемую методу

attachEvent,

нигде не сохраняется, чтобы ее можно было передать методу

detachEvent

17.3.3. Область видимости обработчика событий

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

addEvent,

представленной выше.)

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

<form>

(если таковой имеется) и объекта

Document

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

with

HTML-атрибуты плохо подходят для включения длинных строк программного кода, и такая модифицированная цепочка областей видимости помогает сократить его. Она позволяет использовать

tagName

вместо

this.tagName

getElementByld

вместо

document.getElementByld

, а в обработчиках, привязанных к элементам документа внутри элемента

<form>,

можно ссылаться на другие элементы формы по значению атрибута

, используя, например, имя

zipcode

вместо

this.form.zipcode

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

Document

определяет (редко используемый) метод

ореn,

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

ореn

объекта

Window

, он вынужден будет явно вызывать его как

window.ореn,

вместо

ореn.

Аналогичная (но более пагубная) проблема наблюдается при работе с формами, потому что имена и значения атрибутов

элементов формы определяют свойства во вмещающем элементе формы (раздел 15.9.1). То есть если, к примеру, форма содержит элемент со значением «location» атрибута

, все обработчики событий, созданные внутри этой формы с помощью HTML-атрибутов, должны будут использовать

window.location

вместо

location

, если им потребуется сослаться на объект

Location

окна.

17.3.4. Возвращаемые значения обработчиков

Значение, возвращаемое обработчиком события, зарегистрированным установкой свойства объекта или с помощью HTML-атрибута, следует учитывать. Обычно возвращаемое значение false сообщает броузеру, что он не должен выполнять действия, предусмотренные для этого события по умолчанию. Например, обработчик

onclick

кнопки отправки формы может вернуть false, чтобы предотвратить отправку формы броузером. (Это может пригодиться, если ввод пользователя не прошел проверку на стороне клиента.) Аналогично обработчик события

onkeypress

поля ввода может фильтровать ввод с клавиатуры, возвращая false при вводе недопустимых символов. (Пример 17.6 фильтрует ввод с клавиатуры именно таким способом.)