Информационная:
Пожалуйста, расскажите о нас друзьям и сделайте репост:
Финансовая:
Если этот сайт вам помог, будем благодарны за любую финансовую помощь: R598551293139
Урок №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
При работе с событиями вы постепенно их запомните, а пока рекомендуется добавить данную таблицу в закладки.
R598551293139
