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

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

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

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

1. Во-первых, раз это ссылка, то сохраним тот же формат, который использовался ранее.
2. Что изменяется, окно или документ? Куда идет команда bgColor, когда создается Web-страница? В документ. Значит, это и есть нужный объект. Заменим window на document.
3. Мы собираемся изменить фоновый цвет объекта, потому заменим status на bgColor.
4. Появление текста нам больше не нужно, поэтому заменим его цветом. Возьмем розовый ( pink ).
5. Нам нужно, чтобы новый цвет оставался независимо от того, сколько раз мы будем наводить курсор на ссылку, потому вставляем return true после точки с запятой.

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

<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(), изменить текст, не забывая про двойные и одинарные кавычки, и все готово.