Главная

Новости

Статьи и обзоры
  Горожанин
  Обнинск в Internet
  Web Design
  Hardware
  Software
  Безопасность
  Серфинг
  Игродром
  Relax
  Технологии
  Web-обзор
  Интернет-ликбез
  Опросник
  УП-Технологии
  ART.net

Ссылки

Архив

О нас

Контакты

Форумы

POPULAR.RU

la_serg

JavaScript: События - часть2

В прошлом номере мы познакомились с моделью событий в языке JavaScript. Давайте более подробно разберем значения некоторых событий.

Оговорим правила. Все события связанны с какими-то конкретными объектами. Подразумевается, что событие происходит над объектом.

Событие onFocus. Данное событие происходит при выделение какого либо предмета. Обычно применяется к элементам формы или окнам. Элемент формы считается выделенным, когда в нем мигает курсор (для полей ввода) или он обведен пунктирной рамкой.

Событие onBlur. Это событие противоположно предыдущему, обозначает потерю (снятие) выделения с предмета. Применяется там же где onFocus. Пример:

Window.onblur=lostfocus;
Function lostfocus() {
Window.close();
Return true;}

При размытии нашего окна (т.е. когда на передний план вызываем другое окно) вызывается функция lostfocus() - эта функция закрывает наше окно.

Событие onMouseDown фиксирует нажатие кнопки мыши. Событие onMouseUp фиксирует отпускание кнопки мыши. Событие onClick происходит при однократном клике мышкой по объекту. Напомню: клик состоит из двух стадий - onMouseDown и onMouseUp, причем оба этих события должны произойти над объектом. Заметьте, если Вы нажмете кнопку, затем удерживая кнопку Вы уберете курсор с объекта и лишь затем отпустите кнопку - событие onClick не произойдет, будет зафиксировано только onMouseDown. Событие onDblClick - двойной клик. Состоит из двух событий onClick, произошедших через определенный интервал времени (определяется настройками Операционной системы). Событие onMouseOver. Происходит при появлении курсора над объектом. Чаще всего применяют для картинок в паре с onMouseOut, которое фиксирует покидание объекта курсором. Используется вместе с onMouseOver для создания интерактивных кнопок. Эти события работы с мышью применимы для всех видимых объектов. Пример:

<script language="javascript">
img01on = new Image;
mg01off = new Image;
img01on.src = "images/pb/001prv.jpg";
img01off.src = "images/pb/001prv_n.jpg";
function on(imgName) {
imgOn = eval (imgName + "on.src");
document [imgName].src = imgOn;}
function off(imgName) {
imgOff = eval (imgName + "off.src");
document [imgName].src = imgOff;}
</script>...
<a href="images/pb/001.jpg" onmouseover="on('img01')" onmouseout="off('img01')">
<img name="img01" id="img01" src="images/pb/001prv_n.jpg" border="0" width="92" height="66"></a>

Существует масса скриптов, реализующих интерактивные кнопки, этот был выбран как один из наиболее простых и в то же время надежных. Давайте подробнее рассмотрим этот пример. Первые два оператора создают в памяти два объекта типа картинка. Следующие два оператора инициализируют созданные объекты (т.е. загружают в них изображение). Дальше идет определение функций on() и off(). После скрипта идет тег <img> внутри тега <a>. Тег <img> определяет еще один объект типа картинка (уже третий). Тег <a> делает картинку ссылкой. Как Вы поняли, последние три строчки отвечают за кнопку. Теперь разберемся с интерактивностью. Обратите внимание как связанны имена трех объектов картинка. Главная картинка - та, что отображается в браузере, называется img01, другие две называются img01off и img01on соответственно. Функции on() и off() - меняют картинку, отображаемую в img01 сначала на ту, что хранится в img01on затем на img01off. Таким образом, мы получаем кнопку изменяющеюся при наведении на нее курсора.

Событие onDragDrop. Дословно: перетащить и бросить. "Срабатывает" какой-нибудь объект поверх Вашего, если Вы его "бросаете". Применимо для видимых объектов, практически не используется. Событие onChange. Фиксирует изменение списка. Чаще всего применяется к выпадающим спискам. Пример:

<script language="javascript">
function choose(obj) {
location.href=obj.value;}
</script>
<select onchange="choose(this)">
<option value="#" selected>
<option value="matan.html">Мат. анализ / ТФКП
<option value="phys.html">Физика / Эл.Техника
<option value="othz.html">Другое .....
</select>

Итак, мы имеем селектор (выпадающий список), где в качестве значений (value) прописаны имена страничек. При выборе какого-нибудь пункта вызывается функция choose с ключевым словом this (this - передает ссылку на текущий объект, подробнее об этом в следующих статьях). Функция choose открывает в браузере страничку прописанную в значении (value) выбранного объекта.

В следующей статье мы закончим рассматривать механизм событий в JavaScript и поговорим о динамическом создании документов средствами JS. Все примеры, использованные в данной статье, заимствованы с сайта http://vt3.al.ru

#7(48)/20.03.2001