События MouseOver и MouseOut
Эти два события позволяют совершать действия при наведении или уводе курсора мыши на объекты, например, обесцвечивать и проявлять картинки, менять содержимое поля status и т.п. Применительно к гипертекстовым ссылкам, первое событие генерируется браузером, если курсор мыши находится над ссылкой, а второе - когда он покидает ссылку.
Пример 6.2. Рассмотрим пример с записной книжкой, но теперь для появления подменю будем использовать обработчик событияonMouseOver. Для этого достаточно заменить строчки вида:
<A HREF="javascript:ShowMenu(0);void(0);">...</A>открывавшие подменю, когда пользователь кликал по ссылке, на строчки вида:
<td><a href="javascript:void(0);" onMouseOver="ShowMenu(0);">...</A>открывающие подменю при наведении указателя мыши на пункт меню верхнего уровня. Выражения " javascript:void(0); " мы оставили в атрибуте HREF, чтобы ничего не происходило, если пользователь случайно кликнет по пункту меню верхнего уровня.
Пример 6.3. В предыдущем примере нам не требовалось совершать какие-то действия при уводе указателя мыши с пункта меню. Теперь рассмотрим пример, когда это требуется, и для этого мы будем использовать обработчик события onMouseOut. При наведении указателя мыши на ссылку мы будем подменять картинку, а при уводе указателя мыши с картинки - восстанавливать ее. В исходном HTML-документе это будет выглядеть следующим образом:
<A HREF="javascript:void(0);" onMouseOver="document.pic1.src='pic1.gif';" onMouseOut="document.pic1.src='pic1_.gif';"> <IMG NAME=pic1 src=pic1_.gif BORDER=0></A>Как уже рассказывалось в "Программируем свойства окна браузера" , при возникновении события MouseOver у гиперссылки браузерпоказывает URL этой ссылки в поле статуса, а при возникновении события MouseOut восстанавливает в поле статуса прежнюю надпись. Перехватить первое событие (например, отменить вывод URL в строке статуса) можно, указав в его обработчике return true. Перехватить второе событие невозможно.
Примечание. В настоящее время обработчики событий onMouseOver и onMouseOut работают уже не только с гипертекстовыми ссылками, но и с изображениями, полями ввода, таблицами, их строками и ячейками, кнопками и другими HTML-элементами.
URL-схема "JavaScript:"
Для программирования гипертекстовых переходов в спецификацию URL разработчики JavaScript ввели, по аналогии с URL-схемами http,ftp и т.п., отдельную URL-схему javascript. Она уже упоминалась во вводной лекции при обсуждении вопроса о том, куда можно поместить JavaScript-программу в HTML-документе. Здесь мы рассмотрим ее подробнее.
Схема URL javascript: используется следующим образом:
<A HREF="JavaScript:код_программы">...</A><FORM ACTION="JavaScript:код_программы" ...> ... </FORM>Рассмотрим пример гипертекстовой ссылки, в URL которой использована схема javascript:
<A HREF="javascript:alert('Спасибо!');">Кликните</A>Как видим, если кликнуть по ссылке, то вместо перехода по какому-либо адресу просто появляется окно предупреждения.
В общем случае, после " javascript:" может стоять произвольная программа JavaScript. Что в этом случае будет происходить, если кликнуть такую ссылку? Ответ следующий: сначала JavaScript-программа будет исполнена, в результате чего будет вычислено ее значение(которым всегда считается значение последнего оператора в программе). Затем, если это значение неопределено ( undefined ), то далее ничего не произойдет; если же полученное значение определено, то на экран будет выведена HTML-страница с этим результатом (преобразованным в строку и воспринятым как HTML-документ, который в том числе может содержать и HTML-тэги).
В примере выше метод alert() не возвращает никакого значения, поэтому после появления окна предупреждения более ничего не происходит. Рассмотрим другие примеры. Кликнув по ссылке
<A HREF="javascript: 2+8; 5+7;">ссылка</A>мы получим страницу, на которой написан результат последнего выражения 12 (первое выражение 2+8, конечно, тоже будет вычислено, но его результат никуда не пойдет). Если же кликнуть по такой ссылке:
<A HREF="javascript: '<HTML><BODY><H1>Ready!<H1></BODY></HTML>';">Кликните</A>то в окне браузера откроется страница, исходный HTML-код которой есть <HTML><BODY><H1>Ready!<H1></BODY></HTML>. Если нужно, чтобы при клике по ссылке просто выполнились какие-то действия и более ничего не происходило (в частности, не происходил переход к какой-либо другой странице), то в конце программы можно поместить оператор void(0) либо void(выражение). Эта функция вычисляет переданное в нее выражение и не возвращает никакого значения. Пример:
<A HREF="javascript: document.bgColor='green'; void(0);">Кликните</A>Если кликнуть по такой ссылке, то изменится цвет фона, и больше ничего не произойдет. Без void(0) нам бы открылась web-страница со словом green.
Все сказанное справедливо и для использования URL-схемы " javascript:" в атрибуте ACTION контейнера <FORM>, за одним нюансом: в этом случае необходимо, чтобы в качестве метода доступа был указан METHOD="POST". Дело в том, что при использовании метода GETпри отправке данных формы (т.е. при возникновении события Submit ) к адресу URL, указанному в атрибуте ACTION, добавляется строка " ?имя=значение&имя=значение&...", составленная из имен и значений элементов формы. Конечно же, такое выражение не является корректной JavaScript-программой, и браузеры могут выдавать сообщения об ошибке (а могут и не выдавать, а просто не выполнять программу). Пример:
<FORM NAME=f METHOD=postACTION="javascript:alert('Длина строки = '+document.f.e.value.length);"><INPUT NAME=e><INPUT TYPE=submit VALUE="Длина"></FORM>Если ввести любую строку в поле ввода и нажать кнопку, то будет выведена длина строки. Этот пример был создан лишь для демонстрацииURL-схемы " javascript:"; он весьма искусственный, т.к. в данном случае более уместно было бы использовать обработчик событияonClick или onSubmit. Об этом и других применениях JavaScript в обработке форм рассказывается в лекции, посвященной программированию форм.
Дата добавления: 2016-05-25; просмотров: 437;