Наука + Бизнес = $$$

Карта Сайта

Среда, 13.12.2017, 08:35
Приветствуем Вас Гость
Главное Меню
Помощь Сайту
Информационная:
Пожалуйста, расскажите о нас друзьям и сделайте репост:

Финансовая:
Если этот сайт вам помог, будем благодарны за любую финансовую помощь:
R598551293139

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

События в 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 выполняется при двойном клике.')">

Попробуйте сделать двойной клик по изображению ниже.
Событие 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" >

Попробуйте навести курсор мышки на изображение ниже
События 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

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


Форма входа
Поиск по сайту
Полезные Сайты
Счетчики
Счетчик PR-CY.Rank
Подписка на обновления
Ваш e-mail: *
Ваше имя: *
Контакты
PhantomX5 © 2014-2017Пишем нам: PhantomX5@mail.ru