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

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

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

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

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

Событие onclick

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

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

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

Событие ondblclick

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

События onmouseove и onmouseout

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

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

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

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

Событие onkeydown

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

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

Событие onkeyup

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

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

Событие onkeypress

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

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

Все события JavaScript

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