Тема событий очень важная и очень интересная. Благодаря ей, можно делать очень много интересных вещей, от которых пользователь будет в восторге. Событие в JavaScript - это определённое действие, которые вызвано либо пользователем, либо браузером. Например, событием может быть клик мыши по кнопке, движение мыши, наведение фокуса на элемент, изменение значения в каком-нибудь текстовом поле, изменение размеров окна браузера и так далее.
Я подготовил таблицу со всеми событиями (которые я знаю, по крайней мере) в JavaScript. В ней Вы найдёте, во-первых, название события, элементы, которые могут генерировать это событие и описание самого события JavaScript.
Событие Объект Причина возникновения AbortImageПрерывание загрузки изображенияBlurButton, Checkbox, FileUpload, Frame, Layer, Password, Radio, Reset, Select, Submit, Text, Textarea, WindowПотеря фокуса элементаChangeFileUpload, Select, Text, TextareaСмена значенияClickArea, Button, Checkbox, Document, Link, Radio, Reset, SubmitКлик мыши на элементеDblClickArea, Document, LinkДвойной клик на элементеDragDropWindowПеремещение в окно браузераFocusButton, Checkbox, FileUpload, Frame, Layer, Password, Radio, Reset, Select, Submit, Text, Textarea, WindowУстановка фокуса на элементеKeyDownDocument, Image, Link, TextareaНажатие клавиши на клавиатуреKeyPressDocument, Image, Link, TextareaУдержание клавиши на клавиатуреKeyUpDocument, Image, Link, TextareaОтпускание клавиши на клавиатуреLoadDocument, Image, Layer, WindowЗагрузка элементаMouseDownButton, Document, LinkНажата кнопка мышиMouseMoveWindowМышь в движенииMouseOutArea, Layer, LinkМышь выходит за границы элементаMouseOverArea, Layer, LinkМышь находится над элементомMouseUpButton, Document, LinkОтпущена кнопка мышиMoveFrameПеремещение элементаResetFormСброс формыResizeFrame, WindowИзменение размеровSelectText, TextareaВыделение текстаSubmitFormПередача данныхUnloadWindowВыгрузка текущей страницы
Теперь разберёмся с тем, как использовать события в JavaScript. Существуют, так называемые, обработчики событий. Обработчики событий как раз и определяют, что будет происходить при возникновении определённого события. Обработчики событий в JavaScriptимеет следующий общий вид:
onНазваниеСобытия
То есть вначале идёт приставка "on", а дальше название события, например, такие обработчики событий: onFocus, onClick, onSubmit и так далее. Думаю, тут вопросов не возникло. А теперь главный вопрос: "Как использовать события в JavaScript?". Область их применения огромна, и мы сейчас с Вами рассмотрим одну задачку. На странице имеются три ссылки. Каждая из ссылок отвечает за разный цвет фона (допустим, белый, жёлтый и зелёный). Вначале фон белый. При наведении мыши на определённую ссылку цвет фона меняется. При отведении мыши цвет фона возвращается на цвет по умолчанию. При щелчке мыши по ссылке цвет фона сохраняется, как по умолчанию.
<html>
<head>
<style>
a {
color: blue;
text-decoration: underline;
cursor: pointer;
}
</style>
<script language = 'javascript'>
var default_color = "white";
function setTempColor(color) {
document.bgColor = color;
}
function setDefaultColor(color) {
default_color = color;
document.bgColor = default_color;
}
function defaultColor() {
document.bgColor = default_color;
}
</script>
</head>
<body>
<a onMouseOver = "setTempColor('white');" onMouseOut = "defaultColor()" onClick ="setDefaultColor('white');">Белый</a>
<a onMouseOver = "setTempColor('yellow');" onMouseOut = "defaultColor()" onClick ="setDefaultColor('yellow');">Жёлтый</a>
<a onMouseOver = "setTempColor('green');" onMouseOut = "defaultColor()" onClick ="setDefaultColor('green');">Зелёный</a>
</body>
</html>
Давайте разберёмся с этим скриптом, а точнее с уже целой HTML-страницой с поддержкой JavaScript и CSS (другими словами, это пример DHTML). Вначале идут обычные HTML-теги, с которых начинается любая HTML-страница. Дальше мы создаём стиль, в котором требуем, чтобы все ссылки на данной странице были синего цвета, подчёркнутые, и чтобы указатель мыши на них был в виде "Pointer". Вы, возможно, скажите: "А зачем нужно задавать стиль? Ведь ссылки и так точно такими же и будут". Правильно, ссылки, но у нас ссылок как таковых нет (ведь нет же атрибута href в теге), поэтому они будут простым чёрным текстом по умолчанию (правда, кликать по тексту тоже можно). Поэтому стиль обязателен. Вы можете его убрать и посмотреть, что будет. А ещё лучше, поставьте атрибут href (с любым значением, хоть пустым) и объясните, почему скрипт перестал работать. Дальше уже начинается JavaScript. Мы создаём переменную default_color, отвечающую за цвет по умолчанию. Дальше идут три функции:
Функция setTempColor() отвечает за временное изменение цвета.
Функция setDefaultColor() отвечает за изменение цвета по умолчанию.
Функция defaultColor() устанавливает цвет фона по умолчанию.
Потом идут ссылки с атрибутами в виде обработчиков событий. При наведение мышки на ссылку возникает событие MouseOver, соответственно, обработчик события onMouseOverвызывает функцию setTempColor() и передаёт соответствующий параметр. При снятии мышки с элемента возникает событие MouseOut, а дальше вызывается функция defaultColor(), которая делает цветом фона цвет по умолчанию. И, наконец, при клике мышки по ссылке (обработчик onClick) вызывается функция setDefaultColor(), которая устанавливает цвет заданный в параметре цветом фона по умолчанию. Как видите, всё достаточно просто.
Это был принцип использования событий в JavaScript, а дальше всё зависит только от Вашей фантазии!