Программы, работающие с объектами html-документа, называют сценариями.
Программа, написанная на языке JavaScript способна взаимодействовать с объектами среды, окружающей интерпретатор языка. Интерпретатор JavaScript, встроенный в веб-браузер, предоставляет пользователю возможность использовать средства языка для доступа к ресурсам браузера и всего того, что в нем находится в данный момент, например, свойствам браузера и документа, загруженного в него.
Одним из главных (но далеко не единственным) назначений сценариев в html-документе является обработка событий, таких как щелчок кнопкой мыши на элементе документа, помещение указателя мыши на элемент, перемещение указателя с элемента, нажатие клавиши и т. п. Большинство тегов html имеют специальные атрибуты, определяющие события, на которые могут отреагировать соответствующие элементы. Список всех допустимых событий довольно обширен и рассчитан практически на все случаи жизни. События называются довольно просто, особенно если вы знаете английский язык. Например, щелчок левой кнопкой мыши — onclick; изменение в поле ввода данных — onchange; событие onmouseover происходит, когда указатель мыши помещается на элемент html-документа. Список событий мы рассмотрим позже. Значением таких атрибутов-событий в тегах html является строка, содержащая сценарий, выполняющий роль обработчика события. Например, следующий html-код определяет заголовок второго уровня, который реагирует на щелчок кнопкой мыши тем, что выполняет некоторую функцию myfunc():
<h2 onclick = "myfunc()">Щелкни здесь</h2>
Для одного и того же элемента можно определить несколько событий, на которые он будет реагировать. Другими словами, для одного и того же тега можно указать несколько атрибутов-событий. Имена этих атрибутов, как и других, можно писать в любом регистре. Порядок следования атрибутов не имеет значения.
Итак, значением атрибута-события, как уже отмечалось, является код сценария, заключенный в кавычки. Этот сценарий называют также обработчиком события.
В приведенном выше примере обработчиком события onclick является функция myfunc(). Если обработчик события содержит несколько выражений, то они разделяются точкой с запятой.
Обычно обработчики событий оформляются в виде функций, определения которых помещают в контейнерный тег <script>.
Пример: Изображение в html-документе определяется, как известно, тегом <img>.
Файл с изображением задается атрибутом src. Обработчик события onclick задается в примере как функция clickimage(), которая должна быть определена где-то в контейнере <script>. В результате щелчка на графическом изображении из файла picture.jpg выводится окно с сообщением:
Если сценарий обработки события небольшой и используется в html-документе один раз, то целесообразно оформлять его непосредственно в виде значения атрибута-события. В других случаях предпочтителен первый вариант, то есть оформление обработчика в виде функции.
Чтобы указать браузеру явным образом, что сценарий написан на языке JavaScript, можно в значении атрибута-события написать префикс "javascript:". Например, <img onclick = "javascript: аlert(‘Привет!’)">. Если не указывать язык сценария, то браузер будет подразумевать JavaScript.
Каждое действие пользователя (нажатие на клавишу, щелчок кнопкой мыши и т. п.) формирует некоторое событие, то есть сообщение о произошедшем. Операционная система (например, Windows) анализирует это сообщение, чтобы узнать, откуда оно взялось и что с ним делать дальше. Если, например, пользователь нажал на кнопку мыши в момент, когда ее указатель находился над окном браузера, то Windows пошлет браузеру сообщение о том, какая кнопка мыши была нажата, какие при этом клавиши клавиатуры удерживаются, а также координаты указателя мыши. Если пользователь щелкнул где-то на панели инструментов, браузер отработает это сообщение сам. Если же в момент щелчка указатель находился на территории HTML-документа, то браузер пропустит сообщение о событии через свою объектную модель. В HTML-коде документа может находиться сценарий для обработки этого события. Инструкции этого сценария направляются к браузеру опять же через объектную модель.
Сообщение о событии формируется в виде объекта, то есть контейнера для хранения информации. Как только объект события создан, браузер присваивает значения его свойствам. Например, объект, соответствующий щелчку мышью, содержит координаты указателя мыши, а также сведения о том, какая кнопка была нажата. Кроме того, объект события в одном из своих свойств содержит ссылку на элемент, с которым связсвязано данное событие (например, на кнопку, изображение, поле ввода и т. п.). Объект события хранится в памяти столько времени, сколько необходимо сценарию для его обработки. Пока выполняется обработчик события, объект события вместе со своими свойствами доступен сценарию, находящемуся в памяти браузера. Как только обработчик события завершит работу, объект события становится пустым (возвращается в исходное состояние).
В любой момент времени существует не более одного объекта события. Все инициированные события заносятся операционной системой в буфер и выполняются последовательно в том порядке, в каком они туда попали.
В объектной модели имеется объект event, являющийся подобъектом объекта окна Window. Он содержит информацию о том, какое событие произошло, какой элемент должен на него реагировать, и ряд других характеристик. Объект event можно использовать в сценариях для документов с большим количеством интерактивных элементов, для выяснения причин неправильного отображения веб-страниц. Далее мы рассмотрим некоторые наиболее часто используемые свойства объекта event.
В качестве примера ниже приводится html-документ, не содержащий видимых элементов. Щелчок мышью или нажатие клавиши на клавиатуре выводит диалоговое окно со значениями некоторых свойств объекта event. Так, свойства х и у содержат значения координат указателя мыши в момент щелчка, отсчитанные в данном случае относительно окна браузера. Свойство keyCode возвращает код нажатой клавиши с символам в системе Unicode. Для латинских и цифровых символов кодировки Unicode и ASCII совпадают. При нажатии навигационных клавиш и клавиш дополнительной цифровой клавиатуры keyCode возвращает null. По существу, keyCode — это код соответствующего символа, а не код клавиши. Для фиксации самой клавиши используются события onkeydown и onkeyup, а не on keypress.
