События для работы с вводом javascript. События в JavaScript. Стандартный HTML обработчик события через атрибуты

События JavaScript

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

- при попытке пользователя закрыть окно и выгрузить документ выводится сообщение

- при щелчке мышью по изображению выполняется некая функция showPict()

Половина обработчиков поддерживаются практически всеми HTML-элементами (). Некоторые события можно имитировать с помощью соответствующих методов. Ниже приводится список событий согласно спецификации HTML 4.0 и некоторые события, поддерживаемые MS IE. Трактовка браузеров может отличаться от стандарта и в плане применимости обработчика к тем или иным элементам

События - это действия, которые JavaScript может отследить.

Реакция на Событие

Пример ниже показывает дату, когда была нажата кнопка:

События

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

Каждый элемент на веб странице имеет определенные события, которые могут приводить в действие JavaScript. Например, мы можем использовать событие onClick элемента button, чтобы запустить функцию, когда пользователь нажимает по этой кнопке. Мы определяем события в HTML тегах.

Примеры событий:

Замечание: События обычно используются вместе с функциями, и функция не будет выполняться пока не произойдет событие!

onLoad и onUnload

События onLoad и onUnload происходят, когда пользователь заходит или покидает страницу.

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

Оба события onLoad и onUnload также часто используются, когда мы имеем дело с cookies, которые должны быть установлены, когда пользователь заходит или покидает страницу. Например, вы могли бы сделать всплывающее окно, спрашивающее имя пользователя, когда он впервые заходит на вашу страницу. Имя часто сохраняется в cookie. В следующий раз, когда посетитель зайдет на вашу страницу, вы могли бы создать другое всплывающее окно, например: "Добро пожаловать Вася Иванов!".

onFocus, onBlur и onChange

События onFocus, onBlur и onChange часто используются при проверке полей формы.

Ниже пример того, как использовать событие onChange. Функция checkEmail() будет вызвана как только пользователь меняет значение поля:

onMouseOver

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

На этом уроке мы рассмотрим основные виды событий, которые Вы можете перехватывать с помощью 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 - событие происходит при прокручивании колеса мыши вперёд или назад над элементом.

Задания

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

Во время работы со страницей пользователь совершает различные действия: нажимает кнопки мыши, вводит текст на клавиатуре. Каждое такое действие - это событие браузера. Его можно отследить и выполнить определённые строки программы при их возникновении. Для этого в JavaScript есть обработчики событий. Кроме действий пользователя, существуют и другие события браузера, например полная загрузка страницы.

Каждое событие имеет своё название. click - это нажатие левой кнопки мыши, keydown - нажатие клавиши, focus - появление в фокусе элемента формы,

Обработка события

Функция, которая выполняется при срабатывании события называется обработчик события . Для каждого типа событий есть свой обработчик. Название обработчика состоит из слова on и названия события. Например, обработчик события click называется onclick . События происходят не на странице вообще, а на конкретном элементе. Соответственно и обработчик - это не отдельная функция. Обработчик ставится на какой-то элемент страницы.

Есть разные способы назначить элементу обработчик события. Можно назначить обработчик через атрибут тэга. Код, который должен выполниться при срабатывании события, пишется в значении атрибута. Создадим страницу, добавим на неё кнопку и назначим ей обработчик события click :

JavaScript:

JavaScript:

Когда функция присваивается обработчику, то после имени функции нет скобок. Если поставить скобки, то это будет не присваивание функции, а вызов на исполнение.

Существует метод addEventListener() , который также назначает обработчик события элементу. Он считается более современным. Сейчас он применяется не часто, но в JavaScript есть новые события, обработать которые можно только с помощью этого метода.

элемент.addEventListener (событие, функция)

Параметры:

событие - событие, которое нужно обрабатывать

функция - функция, которая становится обработчиком

В параметрах данного метода название события пишется в кавычках и слово on перед ним писать не нужно.

HTML код:

JavaScript:

Метод removeEventListener() позволяет удалить обработчик.

элемент.removeEventListener (событие, функция)

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

Объект события

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

Объект события передаётся в качестве параметра в функцию, которая является обработчиком. Для доступа к объекту нужно в функции создать параметр. Через этот параметр и производится обращение к объекту. Если у функции предполагаются ещё другие параметры, то объект события должен быть первым параметром. Изменим обработчик для кнопки, у которой id равно "button". Получим доступ к объекту события. Вместо сообщения о нажатии кнопки, выведем тип события. Теперь обработчик будет выглядеть так:

Нажмите на кнопку, будет выведен тип сработавшего события.

У всех объектов события есть свойство currentTarget . Оно возвращает элемент, на котором сработало событие. Это может показаться бессмысленным. Ведь обработчик назначен конкретному элементу. Зачем ещё раз возвращать этот элемент? Но с событимяи браузера всё несколько сложнее. Чуть позже Вы узнаете, как это используется. Другие свойства мы рассмотрим при изучении конкретных событий.