Обработка событий Mouseover и Mouseout
Эти два события изо всех событий, которые обрабатываются на страницах Web, используются чаще всего. Именно они позволяют обесцвечивать и проявлять картинки, а также менять содержание поля status. Первое событие генерируется браузером, если курсор мыши указывает на гипертекстовую ссылку, а второе — когда он покидает гипертекстовую ссылку. Рассмотрим пример с записной книжкой, но только для проявления меню второго уровня будем использовать обработчик события onMouseover:
<TABLE BORDER=0 CELLSPACING=1 CELLPADDING=0 ALIGN=center>
<TR>
<TD>
<A HREF="javascript:void(0);" onMouseover="line2(0);return true;">
<IMG SRC=addrpho.gif BORDER=0></A></TD>
...
</TR>
</TABLE>
В качестве обработчика события мы вызываем функцию line2(), которая идентична line1() из предыдущего примера. В примере IMG перенесен на новую строку для наглядности. На самом деле так поступать не следует — при интерпретации HTML-парсером могут появиться неучтенные пропуски, которые не предусмотрены автором страницы. (открыть)

Мы рассмотрели редкий пример, в котором не требуется возврата предыдущего значения после прохода мыши по гипертекстовой ссылке. По этой причине в гипертекстовой ссылке не применялся второй обработчик onMouseout. В большинстве случаев, например при расцвечивании картинки, он требуется:
<A HREF="javascript:void(0);" onMouseover="document.pic1.src='image.gif';return true;" onMouseout="document.pic1.src='image.gif';return true;"><IMG NAME=pic1 src=image.gif BORDER=0></A>
Рассматривая предыдущий пример, мы не обсудили использование функции return. При работе с графикой значение, которое возвращает обработчик события, на результат отображения не влияет. Но если изменять значение поля статуса браузера, то изменения произойдут только в случае возврата значения true. Более подробно об этом рассказано в разделе "Поле статуса".
Обработка события click
Вообще говоря, обработчик события click в современном JavaScript не нужен. Можно прекрасно обойтись URL-схемой javascript, которая была специально придумана для перехвата события гипертекстового перехода. Обработчик onClick следует рассматривать как реликт, доставшийся нам в наследство от предыдущих версий языка, который поддерживается в версиях Netscape Navigator и Internet Explorer.
Основная задача обработчика данного события — перехват события гипертекстового перехода. Если функция обработки данного события возвращает значение true, то переход происходит, при значении false — не происходит:
Отменим переход в начало страницы описания события обработчика onClick:
<A HREF=#click onClick="window.alert('Нет перехода на #click');
return false;">onClick</A>
А теперь дадим пользователю право выбора перехода в начало страницы посредством окна подтверждения:
<A HREF=#top onClick="return window.confirm('Перейти в начало страницы?');">переход в начало страницы</A>
Обратите внимание на место применения функции window.confirm() — аргумент команды return. Логика проста: функция возвращает значение true или false, и именно оно подставляется в качестве аргумента. Если просто написать функцию без return, то ничего работать не будет.
Можно ли вообще обойтись одним обработчиком onClick без использования атрибута HREF? Видимо, нет. Первое, что необходимо браузеру — это определение типа контейнера A. Если в нем есть только атрибут NAME, то это якорь, если присутствует атрибут HREF — ссылка. Это два разных объекта. Они имеют различные составляющие, в том числе и обработчики событий. В контексте текущего раздела нам нужна именно ссылка, т.е. контейнер A с атрибутом HREF. Проверим наше предположение:
<A ID=red onClick="window.alert("тест");return false;">
Нет атрибута HREF
</A>
Текст "Нет атрибута HREF" — это якорь. Обработчик на нем не работает, так как на него нельзя указать мышью.
<A HREF="" id=red onClick="window.alert('URL:'+this.href); return false;">
Нет атрибута HREF
</A>
Теперь мы указали пустую ссылку (см. поле статуса). Содержание окна — это база URL.
Схема URL- "javascript:..."
Для программирования гипертекстовых переходов в спецификацию универсального идентификатора ресурсов (URL) разработчики JavaScript ввели отдельную схему по аналогии со схемами http, ftp и т.п. — javascript. Эта схема URL упоминается в разделе "Размещение JavaScript-кода" в контексте передачи управления JavaScript-интерпретатору от HTML-парсера. Кроме того, о программировании гипертекстового перехода рассказано в разделе "Обработка события click". Теперь мы рассмотрим более общий случай обработки события гипертекстового перехода при выборе гипертекстовой ссылки.
Схема URL javascript в общем виде выглядит следующим образом:
<A HREF="javascript:...;">...</A>
<FORM ACTION="javascript:...">
Одним словом, в любом месте, где мы используем URL, вместо любой из стандартных схем можно применить схему javascript. Единственное исключение составляет контейнер IMG. URL в нем используется в атрибуте SRC. Принять определенное значение SRC может при помощи либо назначения в IMG, либо обращения к свойству IMG. По большому счету, применение JavaScript в SRC может только проинициализировать картинку. Дальнейшее ее изменение описано в разделе "Программируем графику". Рассмотрим пример простой гипертекстовой ссылки:
<A HREF="javascript:window.alert('window.alert() изменяет HREF');void(0);">
Заменили обычную ссылку
</A>
Можно выполнить аналогичную операцию, но над картинкой:
var flag=0;
function ichange()
{
if(flag==0)
{
document.i1.src="image1.gif"; flag=1;
}
else
{
document.i1.src="image1.gif"; flag=0;
}
}
...
<A HREF="javascript:ichange();void(0);">
<IMG NAME=i1 SRC=image2.gif BORDER=0>
</A>
Попробуем теперь выполнить JavaScript-код применительно к контейнеру FORM:
<FORM NAME=f action="javascript:window.alert(document.f.fi0.value);void(0);" METHOD=post>
Введите текст для отображения в окне и нажмите ввод:
<INPUT NAME=fi0 SIZE=20 MAXLENGTH=20>
</FORM>
Следует отметить, что все-таки использование схемы javascript в этом месте HTML-разметки выглядит неудачно. Для того чтобы все работало так, как задумано автором, приходится использовать метод POST. Гораздо логичнее применить обработчик события onSubmit.
|