Главная › Телефон › Типы событий

Типы событий

Чаще всего в формах используется тег . Он не имеет закрывающего тега. Вся информация, необходимая браузеру для обработки, содержится непосредственно в теге и задается с помощью различных атрибутов. Семантика значительно варьируется в зависимости от значения его атрибута type .

Атрибуты тега

type Основной атрибут, задающий тип элемента. Если атрибут не указан, то по умолчанию используется значение text .
Возможные значения:

Не все браузеры поддерживают типы, добавленные в HTML5.
Если браузер не поддерживает какой-то из новых типов, то он будет считать, что это тип . Как организовать поддержку старых браузеров описано на примере даты .

Autocomplete="off" Отключает автозаполнение для данного поля. Очень полезно для полей ввода разовых кодов, каптч и т.п. .setAttribute("autocomplete","off"); autofocus Автоматическое получение фокуса при загрузке страницы. Значение можно задать тремя способами: ... ... ... Пример эмуляции свойства автофокус для старых браузеров . disabled Делает элемент недоступным. Недоступные элементы не передаются на сервер. name Имя поля. Каждое создаваемое поле ввода должно иметь собственное уникальное имя, иначе сценарий не определит, к каким полям относятся полученные значения. Конечно, имя поля ввода должно соответствовать имени, которое описано для него в программе обработки. value Значение поля по умолчанию или надпись на кнопке. size Размер поля типа . maxlength Ограничение на количество символов, которые можно ввести в поле типа . readonly="readonly" или "" Запрещает изменение элемента. required Автоматически проверяет заполнено ли поле.
Для подсветки правильно заполненного обязательно поля можно использовать следуюшую конструкцию style: min Минимальное значение числа в поле типа number . max Максимальное значение числа в поле типа number . step Шаг изменения числа в поле типа number . pattern Шаблон поля ввода. Проверка корректности ввода данных. Примеры шаблонов для html5 form input pattern . placeholder Текст-подсказка в поле формы, который пропадает автоматически при получении поле фокуса.
Пример настройки стиля подсказки:

В IE и Firefox (до 18 версии) placeholder считается псевдоклассом, а в остальных – псевдоэлементом.

РЕЗУЛЬТАТ:

List Список вариантов, которые можно выбирать при наборе в текстовом поле.
Изначально этот список скрыт и становится доступным при получении полем фокуса или наборе текста.

Типы элемента INPUT

Кнопка BUTTON

Кнопка BUTTON предназначена для тех случаев, когда надо исполнять какой-нибудь скрипт. То есть на кнопку вешается событие OnСlick и вызывается нужная функция. Атрибут value задает надпись на кнопке. Атрибут onclick задает JavaScript-обработчик, который вызывается при щелчке на кнопке. Атрибут name служит для JavaScript-именования кнопки (на сервер не передается).

Пример

РЕЗУЛЬТАТ:

Кнопка SUBMIT

Эта кнопка предназначена для передачи формы. В большинстве браузеров внешне почти не отличима от кнопки . Сама она не передается, а служит только для управления.

Атрибут onclick для кнопки SUBMIT практически не используется, так как лучше использовать обработчик событий onsubmit , заданный в теге

РЕЗУЛЬТАТ:

Атрибут value дает определенные преимущества при использовании более одной кнопки передачи данных. В этом случае на основании значения полученной переменной сценарий сможет определить, как обрабатывать полученную информацию далее.

Пример

РЕЗУЛЬТАТ:

Атрибут formnovalidate может быть применен, чтобы предотвратить проверку значений формы.

Пример

РЕЗУЛЬТАТ:

Кнопка RESET

Это кнопка очистки формы. При ее нажатии всем измененным элементам возвращается значение по умолчанию. Применяется она достаточно редко. Однако в некоторых случаях может быть весьма полезна.

Совет: осторожно относитесь к выбору надписи на кнопке RESET . Вполне наглядным (и, главное, интуитивно понятным даже чайнику из чайников) будет что-нибудь вроде «Очистить», «Начать сначала», «Удалить ввод» и т.п. В общем, надо, чтобы у пользователя не закралось и тени сомнения относительно предназначения этой клавиши.

Пример

РЕЗУЛЬТАТ:

Поле ввода TEXT

Текстовое поле ввода используется в формах наиболее часто. Более того, его можно по праву считать основным и главнейшим элементом форм. Этот тип используется тегом по умолчанию, его можно не указывать, чтобы вывести текстовое поле. Однако, если возникнет необходимость задать стиль для селектора input , то тогда атрибут type="text" пропускать нельзя.
Имя поля, задаваемое атрибутом name , всегда обязательно, так как базируясь именно на этом параметре, браузер передает сценарию пару имя=значение.

Пример

РЕЗУЛЬТАТ:

Текст «Иванов» помещается в созданное поле в качестве начального значения. Если пользователь не внесет изменений или нажмет кнопку , то значение Иванов будет отправлено сценарию в качестве фамилии пользователя.

Поле ввода чисел NUMBER

Поле предназначено для ввода чисел. Дробная часть при вводе может отделяться как точкой (2.5), так и запятой (2,5). Если пользователь введет буквы, то отправить форму на сервер не удастся.

Пример

РЕЗУЛЬТАТ:

Можно задать минимальное, максимальное значение поля и шаг изменения числа. Значение шага может быть как положительным, так и отрицательным, но должно быть больше 0. Если введенное в поле число не будет отвечать заданным ограничениям, то отправка на сервер не произойдет.

Пример

РЕЗУЛЬТАТ:

Для задания любого шага используйте step="any" .

Пример

РЕЗУЛЬТАТ:

Поле number отображается по-разному: некоторые браузеры показывают стрелочки всегда, некоторые – только при наведении или получении полем фокуса.

Скрытое поле HIDDEN

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

Пример

Браузер не отображает скрытое поле, хотя его можно обнаружить, если перевести броузер в режим просмотра HTML-файла и проанализировать текст Web-страницы. Скрытые поля полезны, если необходимо указать требуемую для сценария информацию, но при этом нежелательно, чтобы пользователь имел возможность вносить в нее изменения. Однако учтите, что сообразительный пользователь может сохранить вашу форму в файле, отредактировать его, а затем передать эту форму серверу в измененном виде. Поэтому не стоит полагаться на скрытые поля с целью создания какой-либо защиты.

Пример

Сценарий получит переменную с именем FormVersion , которой будет присвоено значения 1.2. Эта информация может использоваться для определения способа обработки остальной информации, полученной от формы. Если пользователь изменит это значение, то программа сценария может повести себя неожиданным образом.

Поле ввода адреса электронной почты

Для ввода нескольких адресов можно добавить атрибут multiple , при этом для разделения адресов используется запятая (,)

Пример

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

Элемент в фокусе

Когда элемент формы оказывается в фокусе, возникает событие focus , а когда элемент выходит из фокуса, срабатывает событие blur . Создадим поле для ввода и выведем в консоль текст при получении им фокуса и при выходе из фокуса:

HTML код:

Событие blur иногда используют для проверки значения, введённого пользователем в поле для ввода.

Нет смысла в использовании этих событий для изменения стиля элемента. Для этого в CSS существует псевдокласс focus.

Ввод значения

Событие input возникает, когда пользователь печатает текст в поле для ввода. Оно срабатывает при добавлении или удалении каждого символа, а также при копировании текста в поле для ввода. В некоторых браузерах это оно работает необычно: при каждом вводе символа создаётся событие blur , после этого выполняется обработчик события input, а потом создаётся событие focus . Если обработчиков событий focus и blur нет, то в этом нет проблемы. Но если они есть, то они будут срабатывать при каждом добавлении символа.

Добавим на страницу ещё один тэг и выведем его значение при вводе текста:

HTML код:

JavaScript:

12
13
14
15

var newv=document.getElementById("newvalue"); newv.onchange = function () { console.log("Значение изменено на: "+newv.value); };

Отправка формы

Событие submit срабатывает при отправке формы на сервер. Оно используется для проверки данных, которые пользователь ввёл в форму. В обработчике проверяются значения элементов формы, и если какие-то значения введены неправильно, то делается отмена отправки формы. При этом обычно выводится сообщение, в котором указывается, что нужно исправить.

Поместим созданные тэги в форму и добавим кнопку отправки формы:

HTML код:

Если форма заполнена правильно, то есть во всех полях есть хотя бы два символа, то браузер попытается запустить файл, указанный в атрибуте action , и возникнет ошибка, потому что такого файла нет. Но в этом нет никакого риска, поэтому не нужно опасаться проверять работу скрипта. Если в одном из полей введено менее двух символов, то появится сообщение и отправка будет отменена. Если проверок достаточно много, то можно для каждой проверки выводить своё сообщение и отменять отправку формы.

На этом уроке мы рассмотрим основные виды событий, которые Вы можете перехватывать с помощью JavaScript для выполнения некоторого кода.

Категории событий

Все события JavaScript можно разделить на следующие категории: события мыши (Mouse Events), события клавиатуры (Keyboard Events), события объектов и фреймов (Frame/Object Events), события формы и элементов управления (Form Events), события перетаскивания (Drag Events), события анимации (Animation Events), события буфера обмена (Clipboard Events), события мультимедиа (Media Events), события трансформации (Transition Events), события, посылаемые сервером (Server-Sent Events), события касания (Touch Events), события печати (Print Events), разные события (Misc Events).

Внимание: все события в JavaScript пишутся строчными (маленькими) буквами.

События мыши

mousedown - событие происходит, когда кнопка мыши нажата над некоторым элементом, но ещё не отпущена.
mouseup - событие происходит, когда кнопка мыши над некоторым элементом перешла из состояния нажатия, в состояние отпущена.
click - событие происходит, когда пользователь кликнул мышью на элементе. Порядок возникновения событий, связанных с click (для левой и средней кнопки мыши): mousedown -> mouseup -> click .
contextmenu - событие происходит, когда пользователь кликнул правой кнопкой мышью на элементе. Порядок возникновения событий, связанных с contextmenu (для правой кнопки мыши): mousedown -> mouseup -> contextmenu .
dblclick - событие происходит, когда пользователь выполнил двойной клик на элементе. Порядок возникновения событий, связанных с dblclick: mousedown -> mouseup -> click -> mousedown -> mouseup -> click -> dblclick .
mouseover - событие происходит, когда курсор мыши входит в область, принадлежащей элементу или одному из его детей.
mouseout - событие происходит, когда курсор мыши уходит из области, принадлежащей элементу или одному из его детей.
mousemove - событие происходит, когда курсор мыши перемещается внутри области, принадлежащей элементу.
mouseenter - событие возникает, когда указатель мыши входит в область, принадлежащую элементу. Это событие часто используется вместе с событием mouseleave , которое происходит, когда указатель мыши уходит из области, принадлежащей элементу. Событие mouseenter подобно событию mouseover и отличается от него только тем, что событие mouseenter не всплывает (с понятием всплытия события мы познакомимся немного позже).
mouseleave - событие происходит, когда указатель мыши уходит из области, принадлежащей элементу. Событие mouseleave подобно событию mouseout и отличается от него только тем, что событие mouseleave не всплывает (с понятием всплытия события мы познакомимся немного позже).

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

Порядок возникновения событий: keydown -> keypress -> keyup .

keydown - событие происходит, когда нажата клавиша на клавиатуре над элементом, но ещё не отпущена.
keyup - событие происходит, когда нажатая клавиша на клавиатуре над элементом перешла в состояние отпущено.
keypress - событие происходит, когда пользователь нажал клавишу на клавиатуре над элементом.

События объектов и фреймов

beforeunload - событие происходит, перед тем как документ будет выгружен. Это событие позволяет отображать дополнительное сообщение в диалоговом окне подтверждения "Вы действительно хотите покинуть эту страницу?". Стандартное сообщение, которое появляется при закрытии документа, может отличаться в разных браузерах. Но его Вы не можете изменить или удалить, Вы можете только с помощью этого метода добавить к нему собственное сообщение, которое будет отображаться вместе с сообщением по умолчанию.
error - событие срабатывает при возникновении ошибки, которая происходит при загрузке внешнего файла (например, документа или изображения).
hashchange - событие происходит при изменении якорной части (начинается с символа "#") текущего URL.
load - событие происходит, когда загрузка объекта завершена. Событие load наиболее часто используется для элемента body , чтобы выполнить сценарий сразу же после того как веб-страница полностью загрузится.
unload - событие происходит при выгрузке страницы (например, при закрытии вкладки (окна) браузера).
pageshow - событие происходит, когда пользователь переходит на веб-страницу, т.е. после того как страница становится доступна пользователю. Событие pageshow похоже на событие load , за исключением того, что оно срабатывает каждый раз при загрузке страницы, даже если она загружается из кэша. При первой загрузке страницы событие pageshow срабатывает сразу после события load .
pagehide - событие происходит, когда пользователь уходит со страницы (событие pagehide происходит до события unload). Кроме этого данное событие, в отличие от события unload не препятствует кэшированию страницы.
resize - событие происходит при изменении размеров окна браузера.
scroll - событие происходит, когда вы прокручиваете содержимое элемента, имеющего полосу прокрутки.

События формы и элементов управления

focus - событие происходит, когда элемент получает фокус. Данное событие не всплывает.
blur - событие происходит, когда объект теряет фокус. Данное событие не всплывает.
focusin - событие происходит, когда элемент получает фокус. Событие focusin подобно событию focus , но отличается от него тем, что оно всплывает. Поэтому его можно использовать, когда Вам необходимо выяснить, кто теряет фокус: элемент или его ребёнок?
focusout - событие происходит, когда элемент собирается потерять фокус. Событие focusout подобно событию blur , но отличается от него тем, что оно всплывает. Поэтому его можно использовать, когда Вам необходимо выяснить, кто теряет фокус: элемент или его ребёнок?
change - событие происходит при изменении значения элемента, но уже после того как элемент потерял фокус. Кроме события change в JavaScript есть также похожее событие input , которое отличается от события change тем, что происходит сразу же после изменения значения элемента. Событие сhange в отличие от события input также работает с элементами keygen и select . Для радиокнопок (radiobuttons) и флажков (checkboxes) событие change происходит при изменении состояния этих элементов.
input - событие происходит после того как изменяется значение элемента input или элемента textarea .
invalid - событие происходит, когда элемент input , данные которого необходимо отправить вместе с другими данными формы на сервер, содержит недопустимые данные.
reset - событие происходит перед очисткой формы, которая осуществляется элементом input с type="reset" .
search - событие возникает после того как пользователь нажимает на клавишу Enter или нажимает кнопку " x " (отмена) в элементе input с type="search" .
select - событие происходит после того как Вы выбрали некоторый текст в элементе. Событие select в основном используется для элемента input с type="text" или textarea .
submit - событие происходит перед отправкой формы на сервер.

События перетаскивания

События, связанные с перетаскиваемым объектом (draggable target, исходный объект):

dragstart – событие происходит, когда пользователь начал перетаскивать элемент;
drag – событие происходит, когда пользователь перетаскивает элемент;
dragend – событие происходит, когда пользователь закончил перетаскивания элемента, т.е. когда отпустил курсор мыши.

События, связанные с объектом (drop target), который принимает перетаскиваемый объект (draggable target):

dragenter – событие происходит, когда перетаскиваемый объект (draggable target) вошёл в область элемента (drop target), который может принять перетаскиваемый объект (draggable target).
ragleave – событие происходит, когда перетаскиваемый объект (draggable target) покидает пределы элемента (drop target), который может его принять.
dragover - событие происходит, когда перетаскиваемый объект (draggable target) перемещается в области элемента (drop target), который может его принять.
drop - событие происходит, когда пользователь отпускает перетаскиваемый объект (draggable target) в область элемента (drop target), который может его принять.

События анимации

Три события, которые могут произойти, во время выполнения CSS анимации:

animationstart - возникает, когда анимация CSS началась.
animationiteration - возникает, когда анимация CSS выполняется повторно.
animationend - возникает, когда CSS анимация закончилась.

События буфера обмена

сopy - событие происходит, когда пользователь копирует содержимое элемента. Событие copy также происходит, когда пользователь копирует элемент (например, изображения, созданные с помощью элемента img). Событие copy используется в основном для элементов input с type="text" .
сut - событие происходит, когда пользователь вырезает содержимое элемента.
paste - событие происходит, когда пользователь вставляет некоторое содержимое в элемент.

События печати

afterprint - событие происходит, когда страница начинает печататься (т.е. после нажатия кнопки "Печать" в диалоговом окне) или если диалоговое окно "Печать" было закрыто.
beforeprint - событие возникает перед печатью страницы, т.е. до открытия диалогового окна "Печать".

События перехода

transitionend - событие возникает, когда CSS-переход завершен. Примечание: если переход удален до завершения, (например, если свойство CSS transition-property удалено), то событие transitionend не сработает.

События, посылаемые сервером

error - событие возникает при возникновении ошибки с источником события. Ошибка обычно возникает, когда связь нарушается. Если это произойдет, то объект EventSource будет автоматически пытаться подключиться к серверу.
open - событие возникает, когда соединение с источником события открыто.
message - событие возникает, когда сообщение получено через источник события.
Объект event события message поддерживает следующие свойства:
- data - содержит сообщение.
- origin - URL документа, который вызвал событие.
- lastEventId - идентификатор (id) последнего полученного сообщения.

События мультимедиа

В процессе загрузки аудио/видео события происходят в следующем порядке: loadstart -> durationchange -> loadedmetadata -> loadeddata -> progress -> canplay -> canplaythrough .

abort - событие возникает, когда прерывается загрузка аудио/видео. Это событие возникает именно когда загрузка медиа данных была прервана (отменена), а не, потому что возникла ошибка.
error - событие возникает, когда произошла ошибка при загрузке аудио/видео.
stalled - событие возникает, когда браузер пытается получить медиа данные, но данные недоступны.
- событие происходит, когда браузер начинает искать указанное аудио/видео, т.е. когда начинается процесс загрузки.
durationchange - событие возникает, когда изменяется длительность аудио/видео. Если аудио/видео загружается, то длительность будет меняться от значения "NaN" до фактической длительности аудио/видео.
loadedmetadata - событие возникает, когда метаданные для указанного аудио/видео загружены. Метаданные аудио/видео состоят из: длительности, размера (только видео) и текстовой дорожки.
loadeddata - событие возникает, после того как первый кадр медиа загрузился.
progress - событие происходит, когда браузер загружает указанное аудио/видео.
canplay - событие возникает, когда браузер может начать воспроизведение указанного аудио/видео (т.е. когда буферизация потока аудио/видео достаточна для того чтобы браузер мог начать его воспроизводить).
canplaythrough - событие возникает в тот момент времени, когда браузер может проигрывать указанное медиа без остановки на буферизацию.
ended - событие происходит, когда воспроизведение аудио/видео завершилось (достигло конца). Это событие может использоваться для вывода сообщений типа "Спасибо за внимание", "Спасибо за просмотр" и др.
pause - событие происходит, когда воспроизведение аудио/видео приостановлено пользователем или с помощью кода (программно).
play - событие происходит, когда начинается воспроизведение аудио/видео. Оно также происходит, когда аудио/видео было снято с паузы и начинает воспроизводиться.
playing - событие происходит, когда аудио/видео воспроизводится после того как оно было поставлено на паузу или остановилось для буферизации.
ratechange - событие происходит, когда изменяется скорость воспроизведения аудио/видео.
seeking - событие происходит, когда пользователь начинает перемещение ползунка (переход) к новой временной позиции проигрываемого аудио/видео.
seeked - событие происходит, когда пользователь закончил перемещение ползунка (переход) в новую временную позицию проигрываемого аудио/видео. Событие seeked противоположно событию seeking . Для того чтобы получить текущую позицию воспроизведения, используйте свойство currentTime объекта Audio / Video .
timeupdate - событие происходит при изменении временной позиции воспроизводимого аудио/видео.
Это событие происходит:
- при воспроизведении потока аудио/видео.
- при перемещении ползунка в новую временную позицию воспроизводимого аудио/видео.
Событие timeupdate часто используется вместе со свойством объекта Audio / Video currentTime , которое возвращает текущую временную позицию воспроизводимого аудио/видео в секундах.
volumechange – событие происходит каждый раз при изменении громкости воспроизводимого потока видео/аудио.
Это событие происходит, при:
- увеличении или уменьшении громкости;
- отключении или включении звука.
waiting - событие происходит, когда видео останавливается для буферизации.

Разные события

toggle - событие происходит, когда пользователь открывает или закрывает элемент details . Элемент details предназначен для создания дополнительных сведений, которые пользователь при необходимости может просматривать или скрывать.
wheel - событие происходит при прокручивании колеса мыши вперёд или назад над элементом.

Задания

Является ли событие "Нажатие клавиши на клавиатуре (onkeypress)" сложным? И если является, то в результате, каких простых событий оно возникает?
Например, у Вас есть 2 элемента р и пользователь перемещает мышку с области, принадлежащей одному элементу р, на область, принадлежащую другому элементу р. То, какие в этом случае возникают события, и какие элементы их генерируют?