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

Другие свойства

Вернемся к свойствам, о которых мы говорили ранее. Если свойства есть у окна, то другие объекты тоже должны иметь свойства. Как насчет цвета фона? Это же свойство, не так ли? В HTML цветом фона страницы управляет команда BGCOLOR.

То же самое и здесь, только обязательно соблюдайте регистр символов. В JavaScript цвет фона обозначается bgColor. Подумаем, как создать ссылку, которая изменяла бы цвет фона окна с помощью события onMouseOver.

Вот что получилось ...

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

Если требуется и то, и другое

Подумаем, как можно это сделать. Здравый смысл подсказывает, что нужно написать две команды onMouseOver. Попробуем это реализовать. Эти две команды не разделяются. Мы хотим, чтобы они произошли одновременно, поэтому не будем разделять команды точкой с запятой, так как точка с запятой означает конец оператора.

Новое правило: ставьте запятую, чтобы отделить друг от друга несколько событий JavaScript.

А что насчет кавычек? Запомните, в кавычки помещают отдельные элементы вроде текста. Раз нам нужно, чтобы обе команды выполнились одновременно, как одна, то ставим кавычки в самом начале первой и в самом конце второй. Таким образом мы показываем браузеру, что все это одно событие. Понятно?

Однако нам еще могут понадобиться одинарные кавычки...

Вот что мы получим:

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

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

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

Задание

В этом задании предлагается воспользоваться новым методом, alert() (предупредить). Он выводит небольшое диалоговое окно с текстом и кнопкой OK. Попробуйте сделать так, чтобы окно предупреждения появлялось при наведении курсора на ссылку. Вот формат команды:

alert('выводимый в окне текст')

Продумайте решение, решите, что должно произойти сначала, что потом. На самом деле все это довольно просто.

Возможное решение

<A HREF="http://www.INTUIT.ru" 
onMouseOver="alert('Щелкните ОК, чтобы закрыть окно');"
>Щелкните здесь</A>

Обратите внимание, схема остается фактически та же. Задание состояло в том, чтобы команда onMouseOver вызывала предупреждение. Значит, нужно оставить onMouseOver, добавить метод alert(), изменить текст, не забывая про двойные и одинарные кавычки, и все готово.