Обработка событий с помощью JavaScript

Введение

Теперь, когда вы уже не волнуетесь при использовании CSS для оформления и компоновки страницы, и сделали свои первые неуверенные шаги к пониманию переменных, функций, методов, и т.д. в JavaScript, пришло время использовать эти знания для создания для посетителей сайта интерактивного и динамичного внешнего представления (таких вещей как буксировка, анимация, и т.д.). Управление событиями с помощью JavaScript позволяет выступить в роли доктора Франкенштейна и действительно оживить свои создания!

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

Помните, что код примера для этой лекции можно загрузить и проверить его в работе самостоятельно (http://dev.opera.com/articles/view/handling-events-with-javascript/code-example.zip).

Что такое событие?

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

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

Как работают события

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

Существует два типа управления событиями: перехват события и всплытие события.

Перехват события начинается с самого внешнего элемента в DOM и двигается внутрь до элемента HTML, на котором произошло событие и затем снова наружу. Например, при щелчке на web-странице сначала проверяется элемент HTML на наличие обработчиков событий onclick, затем элемент body, и т.д., пока не будет достигнута цель события.

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

Эволюция событий

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

<a href="http://www.opera.com/" onclick="alert('Hello')">Say hello</a>

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

Следующий шаг в эволюции событий состоял в использовании событий изнутри блока JavaScript, например:

<script type="text/javascript">
  document.getElementById("my-link").onclick = waveToAudience;
    function waveToAudience() {
      alert("Waving like I've never waved before!");
    }
</script>

<a id="my-link" href="http://www.opera.com/">My link</a>

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

События DOM level 2

В ноябре 2000 года, консорциум W3C опубликовал Спецификацию событий объектной модели документа ( DOM ) Level 2, предлагающую более детальный и точный способ управления событиями на web-странице. Новый способ применения событий в элементах HTML выглядит следующим образом:

document.getElementById("my-link").addEventListener("click", myFunction, false);

Первый параметр метода addEventListener является именем события, и нужно отметить, что теперь больше не используется префикс "on". Второй параметр является ссылкой на функцию, которую надо вызвать, когда происходит событие. Третий параметр управляет так называемым useCapture для события, т.е. должен ли использоваться перехват события или всплытие события.

Противоположной для функции addEventListener будет removeEventListener, которая удаляет любое заданное событие из элемента HTML.

Исключение для модели событий Internet Explorer

К сожалению Internet Explorer до сих пор не реализовал модель событий DOM Level 2, и вместо этого использует свой собственный проприетарный метод attachEvent. В действии он выглядит следующим образом:

document.getElementById("my-link").attachEvent("onclick", myFunction);

Отметим, что attachEvent по прежнему использует префикс "on" перед именем фактического события, и не содержит никакой поддержки для решения фазы перехвата.

Противоположной для функции attachEvent будет detachEvent, которая удаляет любое заданное событие из элемента HTML.

Использование событий в различных браузерах

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

Большинство основных библиотек JavaScript имеют встроенные решения, и существует также ряд автономных решений, доступных в сети. Одним из предложений является использование ); необходимо также посмотреть что-нибудь типа средств обработки событий в библиотеке jQuery JavaScript (http://docs.jquery.com/Events).

События и доступность

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

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

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

Обычно никогда не определяйте события в элементах HTML, которые еще не имеют встроенного режима работы для данного определенного события. События onclick необходимо использовать только в таких элементах как a, которые уже имеют резервный механизм для событий щелчка (например, переход в местоположение, определенное в ссылке, или отправка формы).

Управление событиями

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

Первый пример является событием onload, которое принадлежит объекту window. Обычно любые события, которые влияют на окно браузера (такие как onload, onresize и onscroll ) доступны через объект window.

Событие onload возникает, когда web-страница полностью загрузится. Это включает сам код HTML, а также внешние зависимости, такие как изображения, файлы CSS и файлы JavaScript. Когда все они закончат загружаться, вызывается window.onload, и можно начинать использовать функции web-страницы. Следующий очень простой пример выводит сообщение, когда загружается страница:

addEvent(window, "load", sayHi);
function sayHi() {
  alert("Hello there, stranger!");	
}

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

addEvent(window, "load", function () {
  alert("Hello there, stranger!");	
});

Использование событий с определенными элементами

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

addEvent(window, "load", function () {
  var links = document.getElementsByTagName("a");
    for (var i=0; i<links.length; i++) {
      addEvent(links[i], "click", function () {
        alert("НЕТ! Я вас туда не возьму!");

        // Поддержка этой строки добавлена 
        // с помощью функции addEvent
        // См. ниже
      evt.preventDefault(); 
    });
  }
});

И что же здесь происходит? Сначала мы используем событие onload, чтобы проверить, когда web-страница полностью загрузилась. Затем мы находим все ссылки на странице, используя метод getElementsByTagName объекта document. Когда ссылки на них определены, мы циклически просматриваем все ссылки и используем события, чтобы при щелчке на ссылке происходило какое-то действие. Но что насчет бесцеремонной части "вас туда не возьму"? После вывода предупреждения, строка ниже считывает return false. Это означает, что в этом контексте, возврат false предотвращает действие по умолчанию. Мы рассмотрим другие способы указания, как вести себя событиям, в последнем разделе лекции.

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

Чтобы расширить обработку событий, можно использовать различные действия в зависимости от определенных свойств происходящего события. Например, при работе с событием 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.

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

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

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

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

addEvent(document.getElementById("stop-default"), "click", stopDefaultBehavior);
function stopDefaultBehavior (evt) {
  var eventReference = (typeof evt !== "undefined")? evt : event;
  if (eventReference.preventDefault) {
    eventReference.preventDefault();
  }
  else {
    eventReference.returnValue = false;
  }
}

Этот подход использует так называемое обнаружение объекта для подтверждения, что метод действительно доступен, прежде чем его вызывать, что помогает предотвратить возможные ошибки. Метод preventDefault доступен во всех web-браузерах, кроме Internet Explorer, и он предотвращает выполнение действия по умолчанию для события.

Если этот метод не поддерживается, код задает для returnValue объекта глобального события значение false, тем самым останавливая поведение по умолчанию в Internet Explorer.

Остановка всплытия событий

Рассмотрим следующую иерархию HTML:

<div>
  <ul>
    <li>
      <a href="http://www.opera.com/" id="stop-default">Opera</a>
    </li>
    <li>
      <a href="http://www.opera.com/products/dragonfly/" id="stop-default">Opera Dragonfly</a>
    </li>
  </ul>	
</div>

Предположим, что событие onclick используетcя для всех элементов a, элементов li и элемента ul. Событие onclick будет сначала вызывать обработчик событий ссылки, затем элементов списка, и, наконец, обработчик событий неупорядоченного списка.

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

Отметим, что при включении модели событий DOM level 2 и метода useCapture, т.е. при использовании перехвата событий, он будет начинаться с неупорядоченного списка, затем элемент списка, и, наконец, ссылка. Однако, так как перехват событий не доступен для выбора в Internet Explorer, такая функциональность очень редко используется в реальной практике.

Вот как надо писать код, чтобы остановить всплывание событий:

addEvent(document.getElementById("stop-default"), "click", cancelEventBubbling);
function cancelEventBubbling (evt) {
  var eventReference = (typeof evt !== "undefined")? evt : event;
  if (eventReference.stopPropagation) {
    eventReference.stopPropagation();
  }
  else {
    eventReference.cancelBubble = true;
  }
}

Законченный пример обработки событий

Здесь собран вместе пример страницы, демонстрирующий добавление обработчика событий и предотвращение действия по умолчанию для этого события, в зависимости от определенного критерия. Обработчик событий проверяет, разрешено ли отправить форму, в зависимости от того, заполнил ли пользователь все поля или нет. Код JavaScript имеет следующий вид:

addEvent(window, "load", function () {
  var contactForm = document.getElementById("contact-form");
  if (contactForm) {
    addEvent(contactForm, "submit", function (evt) {
      var firstName = document.getElementById("first-name");
      var lastName = document.getElementById("last-name");
      if (firstName  lastName) {
        if (firstName.value.length === 0 || lastName.value.length === 0) {
          alert("You have to fill in all fields, please.");
          evt.preventDefault();
        }
      }
    });
  }
});

Заключение

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

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

Контрольные вопросы

Об авторе

Роберт Наймен занимался разработкой web-интерфейса в течение десяти лет, при этом JavaScript всегда был его основной областью интересов. Он увлеченно поддерживает блог Robert's talk (http://www.robertnyman.com/), посвященный web-разработке.

Он живет со своей прекрасной семьей в Швеции и, пока все спят, встает по ночам писать. Кроме того, он вынашивает тайную мечту однажды разбогатеть и получить возможность написать книгу о реальных вещах за пределами мира web.