События в JavaScript
Тема событий очень важная и очень интересная. Благодаря ей, можно делать очень много интересных вещей, от которых пользователь будет в восторге. Событие в JavaScript - это определённое действие, которые вызвано либо пользователем, либо браузером. Например, событием может быть клик мыши по кнопке, движение мыши, наведение фокуса на элемент, изменение значения в каком-нибудь текстовом поле, изменение размеров окна браузера и так далее.
Я подготовил таблицу со всеми событиями (которые я знаю, по крайней мере) в JavaScript. В ней Вы найдёте, во-первых, название события, элементы, которые могут генерировать это событие и описание самого события JavaScript.
| Событие | Объект | Причина возникновения |
| Abort | Image | Прерывание загрузки изображения |
| Blur | Button, Checkbox, FileUpload, Frame, Layer, Password, Radio, Reset, Select, Submit, Text, Textarea, Window | Потеря фокуса элемента |
| Change | FileUpload, Select, Text, Textarea | Смена значения |
| Click | Area, Button, Checkbox, Document, Link, Radio, Reset, Submit | Клик мыши на элементе |
| DblClick | Area, Document, Link | Двойной клик на элементе |
| DragDrop | Window | Перемещение в окно браузера |
| Focus | Button, Checkbox, FileUpload, Frame, Layer, Password, Radio, Reset, Select, Submit, Text, Textarea, Window | Установка фокуса на элементе |
| KeyDown | Document, Image, Link, Textarea | Нажатие клавиши на клавиатуре |
| KeyPress | Document, Image, Link, Textarea | Удержание клавиши на клавиатуре |
| KeyUp | Document, Image, Link, Textarea | Отпускание клавиши на клавиатуре |
| Load | Document, Image, Layer, Window | Загрузка элемента |
| MouseDown | Button, Document, Link | Нажата кнопка мыши |
| MouseMove | Window | Мышь в движении |
| MouseOut | Area, Layer, Link | Мышь выходит за границы элемента |
| MouseOver | Area, Layer, Link | Мышь находится над элементом |
| MouseUp | Button, Document, Link | Отпущена кнопка мыши |
| Move | Frame | Перемещение элемента |
| Reset | Form | Сброс формы |
| Resize | Frame, Window | Изменение размеров |
| Select | Text, Textarea | Выделение текста |
| Submit | Form | Передача данных |
| Unload | Window | Выгрузка текущей страницы |
Теперь разберёмся с тем, как использовать события в 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, а дальше всё зависит только от Вашей фантазии!
-
Создано 25.10.2010 10:45:43
-
Михаил Русаков
Комментарии (14):
А как делать чтобы если зарегистрировался как у Ваc на сайте например: я зарегистрировался и когда пишу комментарий моё имя отображают и нельзя его поменять, и мэйл тоже. Можете объеснить как так делать? Тоже самое и с комментарием на форуме. И еще можете сказать как информацию хранить. Например: кто-то зарегистрировался потом у него появилась иконка "Добавить комментарий", или что-то другое. Заранее благодарю. =)
Ответить
Я решил просмотреть Ваше платное видео. Отвечать не обязательно
Ответить
<style> a { color: blue; text-decoration: underline; cursor: pointer; } </style> Поправте
Ответить
Спасибо, подправил!
Ответить
Вы извините,может я слишком тупой.Но как подвязать HTML и CSS к javascript?Я не до понял
Ответить
http://myrusakov.ru/javascript-hello-world.html
Ответить
А можно ли использовать событие OnLoad больше одного раза? Например, вставить на сайт анимированный текст и цыфровые часы одновременно. Пробую это сделать, пишу события через запятую, отображается что-то одно - либо текст, либо часы.
Ответить
Можно, достаточно поставить в onload какую-нибудь функцию, в которой будут запускаться все другие необходимые функции.
Ответить
Спасибо большое. Получилось.
Ответить
!
Ответить
В таблицу можно добавить события Error и Contextmenu (для полноты списка).
Ответить
Добавил href="#" к ссылкам, всё работает без задания стилей. А если оставить пустую, то страница перегружается и setDefaultColor сбрасывается, поэтому скрипт работает некорректно, я прав?
Ответить
Почему у <input type = "checkbox" onfocus = "setBlink('blink_news', true);" /> в последнем ХРОМЕ не работает "onfocus"? Причем, если меняю "type" на "text", то все работает.
Ответить
а такой код не короче? <body> <a>Белый</a> <br> <a onmouseover="setColor('yellow')" onmouseout="setColor('white')" onclick="setColor('red')">Жёлтый</a> <br> <a>Зелёный</a> <script> function setColor(color) { document.bgColor = color; } </script> </body>
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.