Урок №8: события в JavaScript

Событие - это функция, которая привязана к определенному элементу веб-страницы. Данная функция активируется после определенного действия пользователя. Таким действием может стать: клик мышки по какому-нибудь элементу, нажатие клавишу на клавиатуре, отправление данных заполненной формы, наведение курсора на элемент веб-страницы и т.п.

Умение обращаться с событиями в JavaScript очень важный навык. Сайты в которых присутствует события кажутся пользователям "живыми", на каждое действие посетителей такого сайта выполняется определенное событие, что вызывает интерес. Как правило, такие сайта имеют большую популярность среди пользователей, а также ценятся несколько выше.

---

События с курсором мышки

Очень часто используются события с мышкой. Например, посетитель кликает на объект веб-страницы или наводит курсор мышки на изображение, которое благодаря JavaScript, будет меняться, или кликает на кнопку, после чего будет происходить проверка веденных данных в текстовые поля формы и т.д.

Событие onclick

Событие onclick вызывается с помощью клика мышки, например на изображение, кнопку, блок или другой элемент веб-страницы. Пример:

<input type="button" value="Кликните пожалуйста"
onclick="alert('вызывается с помощью клика мышки по кнопке.')">

В данном случае событие просто заключено в кнопку, без подключения внешнего файла JavaScript, без тегов script, что иногда очень удобно.

Событие ondblclick

Событие ondblclick (on duble click) работает в точности как и onclick, за исключением того, что для запуска понадобиться двойной клик мышкой. Пример:

<img src="http://phantomx5.ucoz.ru/3.jpeg" width="150" height="75"
ondblclick="alert('Событие ondblclick выполняется при двойном клике.')">
Попробуйте сделать двойной клик по изображению ниже.

События onmouseove и onmouseout

Событие onmouseover активируется при наведении курсора мышки на определенный элемент. В то время как событие onmouseout активируется когда курсор мышки не наведен на элемент. Данные события широко применяются при создании дизайнерских эффектов для сайта, часто используются для создания графического меню. Пример:

<img src="http://cdn6.picsart.com/6840325137.jpeg?r1024x1024" width="300" height="200" border="1"
onmouseover="this.src='http://www.zerofansub.net/images/news/on-va-vous-bouffer.jpg'"
onmouseout="this.src='http://cdn6.picsart.com/6840325137.jpeg?r1024x1024'" alt="События onmouseove и onmouseout" >
Попробуйте навести курсор мышки на изображение ниже

Существует еще одно свойство - onmousemove, которое работает аналогично onmouseover и onmouseout. В случае с onmousemove изображение будет меняться только когда курсор мышки в движении, поэтому данное событие не пользуется особой популярностью.

---

События с клавиатурой

События с клавиатурой менее популярны среди веб-мастеров и все же они могут пригодиться особенно при работе с формами (анкетами, формами регистраций и пр.).

Событие onkeydown

Событие onkeydown активируется при нажатии клавиши на клавиатуре. Пример:

<input type="text" onkeydown="alert('Активировалось событие onkeydown')">
Попробуйте выделить поле и нажать на любую клавишу.

Событие onkeyup

Событие onkeyup активируется при отпускании клавиши на клавиатуре, пока клавиша зажата действие не активируется. Пример:

<input type="text" onkeyup="alert('Активировалось событие onkeyup')">
Попробуйте выделить поле, зажать любую клавишу, а за тем отпустить.

Событие onkeypress

Событие onkeypress активируется при нажатии клавиши на клавиатуре, работает аналогично событию onkeydown, однако не активируется при нажатии некоторых клавиш (f1-f12, ctrl, shift, alt и т.д). Пример:

input type="text" onkeypress="alert('Активировалось событие onkeypress')">
Попробуйте выделить поле и нажать клавишу, кроме вышеперечисленных.

---

Все события JavaScript

Приводить пример к каждому событию не имеет смысла, так как вы уже поняли принцип работы событий в JavaScript. Поэтому ниже представлена таблица всех событий, которые поддерживаются в JavaScript, их описание и перечень HTML элементов, к которым может привязываться то, или иное событие.

Событие	Описание	Работа с Html элементами
onClick	Одинарный клик мышкой	Работает со всеми элементами на веб-странице
onDblClick	Двойной щелчок мышкой	Работает со всеми элементами на веб-странице
onMouseOut	Курсор мышки не наведен на заданный объект	Работает со всеми элементами на веб-странице
onMouseOver	Курсор мышки наведен на заданный объект	Работает со всеми элементами на веб-странице
onMouseUp	Отпущена кнопка мышки в пределах заданного объекта	Работает со всеми элементами на веб-странице
onMouseDown	Нажата кнопка мышки в пределах заданного объекта	Работает со всеми элементами на веб-странице
onMouseMove	Движется курсор мышки в пределах заданного объекта	Работает со всеми элементами на веб-странице
onLoad	Веб-страница полностью загрузилась	Body, Frameset
onUnload	Попытка закрытия веб-страницы и выгрузки документа	Body, Frameset
onKeyDown	Нажата клавиша на клавиатуре	Работает со всеми элементами на веб-странице
onKeyUp	Отпущена клавиша на клавиатуре	Работает со всеми элементами на веб-странице
onKeyPress	Нажата клавиша на клавиатуре (кроме исключений)	Работает со всеми элементами на веб-странице
onMove	Перемещение окна	Window
onResize	Изменение габаритов окна	Window
onError	Возникновение ошибки при выполнении сценария	Window
onReset	Сброс данных всей формы ( клик по кнопке input type="reset" )	Form
onSubmit	Отправка данных формы ( клик по кнопке input type="submit" )	Form
onAbort	Прервана загрузка изображения	Img
onBlur	Переход фокуса с одного объекта на другой (при щелчке мышкой вне области объекта или клавишей "tab")	A, Area, Button, Input, Label, Select, Textarea
onFocus	Получение объектом фокуса (клик мышкой по объекту или очередное нажатие клавиши "tab")	A, Area, Button, Input, Label, Select, Textarea
onChange	Изменение данных объектов формы. Возникает при потери элементом фокуса, т.е. после события blur	Input, Select, Textarea
onSelect	Выделение текста в текущем объекте	Input, Textarea

При работе с событиями вы постепенно их запомните, а пока рекомендуется добавить данную таблицу в закладки.