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

  window.onload = function { ... };
  document.getElementById("button1").onclick = function { ... };
  function handleResponse { ... }
  request.onreadystatechange = handleResponse;

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

В большинстве броузеров для большинства типов событий обработчики получают в виде аргумента объект, свойства которого содержат информацию о событии. Например, объект, передаваемый обработчику события «click», будет иметь свойство, определяющее кнопку мыши, которой был выполнен щелчок. (В IE информация о событии хранится в глобальном объекте и не передается функции-обработчику.) Иногда значение, возвращаемое обработчиком события, используется, чтобы определить, достаточно ли ограничиться выполненной обработкой события и следует ли предотвратить выполнение действий по умолчанию, предусматриваемых броузером.

События, адресатом которых является элемент документа, часто распространяются вверх по дереву документа и этот процесс называется «всплытием». Если, например, пользователь щелкнет мышью на элементе <button>, событие «click» будет передано кнопке. Если это событие останется необработанным (и его распространение не будет остановлено) функцией, зарегистрированной в элементе кнопки, событие всплывет до элемента, в который вложена эта кнопка, и будет вызван обработчик события «click», зарегистрированный в этом контейнерном элементе.

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

  window.addEventListener("load", function {...}, false);
  request.addEventListener("readystatechange", function {...}, false);

Обратите внимание, что первым аргументом этой функции передается имя события. Несмотря на то что метод addEventListener был определен стандартом уже более десяти лет тому назад, корпорация Microsoft только недавно реализовала его в IE9. В IE8 и в. более ранних версиях необходимо использовать похожий метод, который называется attachEvent:

  window.attachEvent("onload", function {...});

Подробнее о функциях addEventlistener и attachEvent рассказывается в главе 17.

Клиентские JavaScript-программы используют еще одну разновидность асинхронных извещений, которые, строго говоря, не являются событиями. Если свойству onerror объекта Window присвоить функцию, она будет вызываться при появлении ошибочных ситуаций (или необработанных исключений) в программном коде (раздел 14.6). Кроме того, функции setTimeout и setlnterval (они являются методами глобального объекта Window и потому в клиентском JavaScript считаются глобальными функциями) вызывают указанные им функции по истечении определенного интервала времени. Функции, которые передаются setTimeout, регистрируются не так, как настоящие обработчики событий, и обычно они называются «функциями обратного вызова», а не «обработчиками», но они, как и обработчики событий, выполняются асинхронно. Подробнее о функциях setTimeout и setlnterval рассказывается в разделе 14.1.

Пример 13.5 демонстрирует применение функций setTimeout, addEventListener и attachEvent внутри функции onLoad, которая регистрирует обработчик события окончания загрузки документа. onLoad– весьма полезная функция, и мы часто будем использовать ее в примерах на протяжении оставшейся части книги.

Пример 13.5. onLoad: вызов функции по окончании загрузки документа

  // Регистрирует функцию f, которая должна вызываться по окончании загрузки документа.
  // Если документ уже загружен, функция f будет вызвана асинхронно и в кратчайшие сроки,
  function onLoad(f) {
   if (onLoad.loaded) // Если документ уже загружен
   window.setTimeout(f, 0); // Вызвать f, как можно скорее
   else if (window.addEventListener) // Стандартный метод регистрации событий
   window.addEventListener("load", f, false);
   else if (window.attachEvent) // В IE8 и в более ранних версиях
   window.attachEvent("onload", f); // используется этот метод
  }
  // Сначала установить флаг, указывающий, что документ еще не загружен.
  onLoad.loaded = false;
  // И зарегистрировать функцию, которая сбросит флаг после загрузки документа.
  onLoad(function { onLoad.loaded = true; });

13.3.3. Модель потоков выполнения в клиентском JavaScript

Ядро языка JavaScript не имеет механизма одновременного выполнения нескольких потоков управления, и клиентский язык JavaScript не добавляет такой возможности. Стандарт HTML5 определяет механизм поддержки фонового потока выполнения «Web Workers» (подробнее об этом механизме рассказывается ниже), тем не менее JavaScript-код на стороне клиента выполняется в единственном потоке управления. Даже когда параллельное выполнение возможно, интерпретатор JavaScript не может обнаружить этот факт.

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

Выполнение в единственном потоке означает, что веб-броузер должен прекратить откликаться на действия пользователя на время выполнения сценария или обработчика события. Это накладывает определенные требования: сценарии и обработчики событий в JavaScript не должны исполняться слишком долго. Если сценарий производит объемные и интенсивные вычисления, это вызовет задержку во время загрузки документа, и пользователь не увидит его содержимое, пока сценарий не закончит свою работу. Если продолжительные по времени операции выполняются в обработчике события, броузер может оказаться неспособным откликаться на действия пользователя, заставляя его думать, что программа «зависла». [29] (

29

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