Ссылки на объект события

Чтобы расширить обработку событий, можно использовать различные действия в зависимости от определенных свойств происходящего события. Например, при работе с событием onkeypress, может понадобиться, чтобы событие происходило, когда пользователь нажимает клавишу ввода, но не другие клавиши.

Так же как и с моделью событий, в Internet Explorer было решено использовать для обработки событий глобальный объект событий, называемый event, в то время как рекомендованный консорциумом W3C способ, реализованный всеми остальными браузерами, состоит в передаче объектов событий, принадлежащих только этому определенному событию. Самая распространенная проблема при реализации такой функциональности в различных браузерах состоит в получении ссылки на само событие, и ссылки на элемент, на который направлено событие. Следующий код решает эту проблему:

addEvent(document.getElementById("check-it-out"), "click", eventCheck);

function eventCheck (evt) {

var eventReference = (typeof evt !== "undefined")? evt : event;

var eventTarget = (typeof eventReference.target !== "undefined")? eventReference.target : eventReference.srcElement;

}

В первой строке в функции eventCheck проверяется, что имеется объект события, передаваемый в функцию. Если имеется, он автоматически становится первым параметром функции, получающим имя evt в этом примере. Если он не существует, что означает, что текущим web-браузером будет Internet Explorer, она обращается к глобальному свойству объекта window с именем event.

Вторая строка ищет свойство target по установленной ссылке события. Если оно не существует, она возвращается к свойству srcElement, реализованному в Internet Explorer.

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

Проверка специфического свойства события

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

addEvent(document.getElementById("user-name"), "keyup", whatKey);

function whatKey (evt) {

var eventReference = (typeof evt !== "undefined")? evt : event;

var keyCode = eventReference.keyCode;

if (keyCode === 13) {

// Была нажата клавиша Enter

// Код для проверки и последующей отправки формы

}

else if (keyCode === 9) {

// Нажата клавиша Tab

// Код, возможно, для очистки поля

}

}

Код внутри функции whatKey проверяет свойство происходящего события, а именно keyCode, чтобы узнать, какая клавиша была фактически нажата на клавиатуре. Число 13 соответствует клавише Enter, а число 9 клавише Tab.

Поведение события по умолчанию и всплытие событий

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