JavaScript_код, расположенный в теге <script>, исполняется один раз, когда со_ держащий его HTML_файл считывается в веб_броузер. Такие статические сцена_ рии не могут динамически реагировать на действия пользователя. В динамиче_ ских программах определяются обработчики событий, автоматически вызывае_ мые веб_броузером при возникновении определенных событий, например при щелчке на кнопке в форме. События в клиентском языке JavaScript генерируются HTML_объектами (такими как кнопки), поэтому обработчики событий определя_ ются как атрибуты этих объектов. Например, чтобы задать обработчик события, который вызывается, когда пользователь щелкает на флажке в форме, код обра_ ботчика указывается в качестве атрибута HTML_тега, определяющего флажок:
Здесь нас интересует атрибут onclick. Строковое значение атрибута onclick мо_ жет содержать одну или несколько JavaScript_инструкций. Если имеется не_ сколько инструкций, они должны отделяться друг от друга точками с запятой. Когда с флажком происходит указанное событие (в данном случае щелчок мы_ ши), исполняется JavaScript_код, указанный в этой строке.
В определение обработчика события можно включать любое количество Java_ Script_инструкций, но обычно для обработки события в атрибут вставляется вызов
13.3. Обработчики событий в HTML
функции, которая определена где_нибудь в другом месте между тегами <script> и </script>. Это позволяет держать большую часть JavaScript_кода внутри тегов <script> и ограничивает степень взаимопроникновения JavaScript_ и HTML_кода.
Примечательно, что атрибуты обработчиков событий являются не единствен_ ным местом определения JavaScript_обработчиков. В главе 17 показано, что су_ ществует возможность определять обработчики событий для HTML_элементов, располагая JavaScript_код внутри тега <script>. Некоторые JavaScript_разработ_ чики призывают отказаться от использования HTML_атрибутов для определе_ ния обработчиков событий, мотивируя это требование парадигмой ненавязчиво_ го JavaScript_кода, в соответствии с которой необходимо полное отделение со_ держимого от поведения. Согласно такому стилю программирования весь Java_ Script_код должен размещаться во внешних файлах, ссылки на которые должны оформляться в виде атрибутов src тегов <script>. Этот внешний JavaScript_код во время своей работы может определить любые обработчики событий, какие только потребуются.
Намного более подробно события и их обработчики обсуждаются в главе 17, но многие примеры их использования мы уже неоднократно рассматривали. В гла_ ве 17 содержится полный список обработчиков событий, а наиболее распростра_ ненные из них мы перечислим здесь:
onclick
Этот обработчик поддерживается всеми элементами форм, подобными кноп_ кам, а также тегами <a> и <area>. Он вызывается, когда пользователь щелкает на элементе. Если обработчик onclick возвращает false, броузер не выполняет стандартное действие, связанное с элементом или ссылкой, например, не от_ крывает ссылку (для тега <a>) или не передает данные формы (для кнопки
Submit).
onmousedown, onmouseup
Эти два обработчика во многом похожи на onclick, но вызываются по отдель_ ности, когда пользователь нажимает и отпускает кнопку мыши. Большинст_ во элементов документа поддерживают эти обработчики.
onmouseover, onmouseout
Эти два обработчика события вызываются, когда указатель мыши соответст_ венно оказывается на элементе документа или покидает его.
onchange
Этот обработчик события поддерживается тегами <input>, <select> и <text_ area>. Он вызывается, когда пользователь изменяет значение, отображаемое элементом, а затем перемещает фокус с помощью клавиши табуляции либо другим способом.
onload
Этот обработчик событий может использоваться в теге <body>. Данное событие возникает, когда документ и все содержимое из внешних файлов (например, изображения) полностью загружено. Обработчик onload часто используется для запуска программного кода, который манипулирует содержимым доку_ мента, т. к. это событие свидетельствует о том, что документ достиг состоя_ ния готовности и его можно изменять.
266 Глава 13. JavaScript в веб*броузерах
Реализацию обработчиков событий можно найти в интерактивном сценарии вы_ плат по закладной в примере 1.3. HTML_форма в этом примере содержит не_ сколько атрибутов обработчиков событий. Тело этих обработчиков просто: они лишь вызывают функцию calculate(), определенную в другом месте внутри тега