Обработчики событий: onMouseOver

Концепция

Мы обсудили объекты и методы. Теперь приступим к рассмотрению событий (events).

Сначала несколько вводных замечаний. События (event) и обработчики событий (event handler) относятся к JavaScript, но они скорее "встроены" в HTML-код, а не существуют самостоятельно, как те сценарии, которые мы создали. События являются встроенными, так что они не требуют команд <SCRIPT> и </SCRIPT>. Сами они являются не сценариями, а скорее небольшими интерфейсами, обеспечивающими взаимодействие между страницей и читателем.

События — это то, что происходит. Они добавят динамики Web-сайту. Увидев их, посетители сайта скажут: "Ух ты!", а длинные сценарии JavaScript для этого совсем не понадобятся.

Существует множество событий, с которыми мы со временем познакомимся, но для начала выберем одно из наиболее популярных — onMouseOver (навести курсор мыши).

Сценарий

<A HREF="http://www.INTUIT.ru" 
onMouseOver="window.status='Почтовая служба'; 
return true">Ссылка</A>

<A HREF="http://www.INTUIT.ru" onMouseOver="document.bgColor='pink'; window.status='Посетите INTUIT.RU'; return true;">Щелкните здесь</A> 

Результат работы сценария

При наведении курсора мыши на ссылку строка состояния в окне браузера изменится.

Разбор сценария

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

Во-первых, onMouseOver (обратите внимание на заглавные буквы) представляет собой обработчик событий (Event Handler) гипертекстовой ссылки. Это понятно? Он используется внутри гиперссылки.

Формат гипертекстовой ссылки остается без изменений. Те же команды и те же двойные кавычки. Обработчик событий onMouseOver ставится сразу же после адреса URL. Видите?

Событие (Event) приводится в действие, когда браузер распознает onMouseOver="". Общая схема уже должна быть немного понятна: два элемента, разделенные точкой. До сих пор это означало, что один является объектом, а другой методом. Но в данном случае объектом является window (окно), оно существует; status (статус) представляет собой свойство (property) oкна. Это небольшой участок окна, где должен разместиться следующий далее в команде текст. Это проще запомнить, если представить, что метод обычно выражается глаголом, как write (писать) или get (получить). Свойство выражается существительным и существует как небольшая часть элемента, стоящего перед точкой.

Если у window есть изменяемое свойство status, значит, можно изменить и другие свойства окна. Это верно, но не будем забегать здесь вперед. Разберемся пока с окном и его строкой состояния.

После window.status ставится знак равенства =, за которым следует то, что должно произойти. В данном случае это текст в одинарных кавычках. Он появится в строке состояния, когда вы наведете курсор на гипертекстовую ссылку.

Пожалуйста, обратите еще раз внимание на точку с запятой в конце командной строки.

Затем следует return true. Эти два слова имеют вполне определенное влияние на то, что произойдет, когда указатель мыши переместится на ссылку. Если они присутствуют, сценарий проверит, есть ли строка состояния. Если проверка будет успешной ( true ), происходит событие. Обратите внимание, что когда указатель мыши перемещается на ссылку, то текст в строке состояния блокируется. Он больше не изменяется при последующих перемещениях указателя мыши на ссылку. (Если обновить страницу, то можно будет это увидеть).

Что произойдет, если эти два слова потеряются? Давайте подумаем. Если проверка строки состояния отсутствует, то выполняется действие по умолчанию. По умолчанию в HTML выводится URL-ссылка, на которую указывает курсор мыши. Затем, когда курсор смещается со ссылки, произойдет событие. И так как проверка отсутствует, то событие будет происходить всякий раз при перемещении курсора мыши над ссылкой. Такой результат будет, наверно, лучше.