- •2. Что такое события в JavaScript
- •2.1. Как связать событие и JavaScript
- •2.3. Основные события в JavaScript
- •2.4. События, о которых не было сказано
- •3. Return к функциям (функции и события)
- •4. Еще один пример использования функций и событий
- •5. События и его свойства (Event)
- •5.1. Передача объекта Event внутрь обработчика события
- •5.2. Всплывание события cancelBubble
- •5.3. Вызов стандартного обработчика
- •5.4. Практика работы с мышью: перетаскивание элементов
- •6. Функции (нюансы) Итак, события мы рассмотрели полностью, но в функциях существует множество нюансов, поэтому следующая тема будет посвящена именно им.
- •6.1. Знакомство с рекурсией.
- •Пример на рекурсию
- •Р екурсии или итерации?
- •6.2. Функция – это переменная. Несколько видов объявлений функций.
- •6.3. Функция внутри функции
- •6.4. Условная функция
- •7. Самостоятельное задание:
7. Самостоятельное задание:
В этом уроке было реализовано всплывающее меню, попробуйте сделать меню из трех уровней, в котором первый уровень – это горизонтальное меню, второй уровень – выдвижное вертикальное меню снизу, третий уровень – выдвижное вертикальное меню слева. Т.е. наведя на первый уровень меню – снизу выпадает список меню следующего уровня, а наведя на пункт меню второго уровня – выпадает меню слева третьего уровня.
Если вам задача покажется легкой, то реализуйте выбор, как будет выглядеть меню первого, второго и третьего уровня: какое расположение (вертикальное или горизонтальное) и откуда выпадает меню (слева или снизу). Эти данные вы можете указать в переменные вначале скрипта, и в зависимости от этих переменных будет производиться вывод соответствующих пунктов меню.
Приложение. Шпаргалка (события JavaScript)
В JavaScript определен ряд событий, связанных с элементами документа. Обработчики дают возможность организовать реакцию на возникновение событий из сценария. При этом соответствующий обработчик указывается как атрибут элемента HTML-документа; значением этого атрибута является выражение JavaScript. Например:
<div onmouseOver="this.style.bgColor='#CCCCCC'" onmouseOut="this.style.bgColor='#EEEEEE'">Наведите курсор мыши</div>
Половина обработчиков поддерживаются практически всеми HTML-элементами. Некоторые события можно имитировать с помощью соответствующих методов. Ниже приводится список событий согласно спецификации HTML 4.0 и некоторые события, поддерживаемые MS IE. Трактовка браузеров может отличаться от стандарта и в плане применимости обработчика к тем или иным элементам.
Обработчик события |
Поддерживающие HTML-элементы |
Описание |
Метод имитации |
onAbort |
IMG |
Прерывание загрузки изображения |
|
onBlur |
A, AREA, BUTTON, INPUT, LABEL, SELECT, TEXTAREA |
Потеря текущим элементом фокуса, т.е. переход к другому элементу. Возникает при щелчке мышью вне элемента либо нажатии клавиши табуляции |
blur() |
onChange |
INPUT, SELECT, TEXTAREA |
Изменение значений элементов формы. Возникает после потерей элементом фокуса, т.е. после события blur |
change() |
onClick |
Практически все HTML-элементы |
Одинарный щелчок (нажата и отпущена кнопка мыши) |
click() |
onDblClick |
Практически все HTML-элементы |
Двойной щелчок |
|
onError |
IMG, WINDOW |
Возникновение ошибки выполнения сценария |
|
onFocus |
A, AREA, BUTTON, INPUT, LABEL, SELECT, TEXTAREA |
Получение элементом фокуса (щелчок мышью на элементе или очередное нажатие клавиши табуляции) |
focus() |
onKeyDown |
Практически все HTML-элементы |
Нажата клавиша на клавиатуре |
|
onKeyPress |
Практически все HTML-элементы |
Нажата и отпущена клавиша на клавиатуре |
|
onKeyUp |
Практически все HTML-элементы |
Отпущена клавиша на клавиатуре |
|
onLoad |
BODY, FRAMESET |
Закончена загрузка документа |
|
onMouseDown |
Практически все HTML-элементы |
Нажата кнопка мыши в пределах текущего элемента |
|
onMouseMove |
Практически все HTML-элементы |
Перемещение курсора мыши в пределах текущего элемента |
|
onMouseOut |
Практически все HTML-элементы |
Курсор мыши выведен за пределы текущего элемента |
|
onMouseOver |
Практически все HTML-элементы |
Курсор мыши наведен на текущий элемент |
|
onMouseUp |
Практически все HTML-элементы |
Отпущена кнопка мыши в пределах текущего элемента |
|
onMove |
WINDOW |
Перемещение окна |
|
onReset |
FORM |
Сброс данных формы ( щелчок по кнопке <input type="reset"> ) |
reset() |
onResize |
WINDOW |
Изменение размеров окна |
|
onSelect |
INPUT, TEXTAREA |
Выделение текста в текущем элементе |
|
onSubmit |
FORM |
Отправка данных формы ( щелчок по кнопке <input type="submit"> ) |
submit() |
onUnload |
BODY, FRAMESET |
Попытка закрытия окна браузера и выгрузки документа |
|
Практически все HTML-элементы: все, за исключением APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE