Вы здесь: Главная » JavaScript » Виды событий в JavaScript

Виды событий в JavaScript

События мыши

События мыши (Mouse Events)
СобытиеОписаниеУровень DOM
onclickНаступает при клике пользователя на элементе2
oncontextmenuНаступает, когда пользователь делает клик правой кнопкой мыши на элементе, чтобы открыть контекстное меню3
ondblclickНаступает при двойном клике пользователя на элементе2
onmousedownНаступает при нажатии левой кнопки мыши на элементе2
onmouseupПроисходит, когда пользователь отпускает кнопку мыши над элементом2
onmouseenterНаступает, когда  указатель мыши перемещается на элемент2
onmouseleaveСобытие происходит, когда указатель перемещается за пределы элемента2
onmousemoveПроисходит, когда указатель мыши двигается над элементом2
onmouseoverПроисходит, когда указатель мыши перемещается на элемент или на один из его дочерних элементов2
onmouseoutСобытие происходит, когда пользователь убирает указатель мыши с элемента или с одного из его дочерних элементов2

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

События клавиатуры (Keyboard Events)
СобытиеОписаниеУровень DOM
onkeydownСобытие происходит, когда пользователь нажимает клавишу2
onkeypressНаступает, когда пользователь нажимает на клавишу, после события onkeydown, но до события onkeyup. Позволяет получить доступ только к символьным клавишам.2
onkeyupпроисходит, когда пользователь отпускает клавишу2

Примечание: Событие onkeypress не срабатывает для всех клавиш (например, клавиши Alt, Ctrl, Shift, Esc) во всех браузерах. Чтобы определить, нажал ли пользователь соответствующую клавишу, необходимо использовать событие onkeydown вместо onkeypress, поскольку оно работает для всех клавиш.
Также нужно учитывать, что обработка этого события поддерживается для всех HTML-тегов, кроме: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title>

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

События окон/фреймов/объектов (Frame/Object Events)
СобытиеОписаниеУровень DOM
onabortНаступает, когда загрузка ресурса была прервана2
onbeforeunloadПроисходит до того, как документ будет выгружен2
onerrorНаступает, когда во время загрузки внешнего файла происходит ошибка (например, неверно указан путь к файлу изображения)2
onhashchangeСобытие происходит, когда произошли изменения в якорной части URL-адреса (http://somesite.com#about-us)3
onloadПроисходит, когда объект загрузился. Обрабатывается для таких html-элементов, как <body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>2
onunloadСобытие происходит, когда страница выгружается (для элемента <body>)2
onpageshowСобытие происходит, когда пользователь переходит на веб-страницу3
onpagehideПроисходит, когда пользователь покидает веб-страницу3
onresizeПроисходит, когда размер видимой части документа изменяется (при изменении размеров окна браузера)2
onscrollСобытие происходит, когда элемент прокручивается (для элементов, у которых задана высота и ширина и overflow: auto или scroll, а также для body, iframe, textarea)2

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

События форм и элементов форм (Form Events)
СобытиеОписаниеУровень DOM
onfocusНаступает, когда элемент получает фокус, т.е. в него помещается курсор или выполнен переход клавишей Tab2
onfocusinСобытие происходит, когда элемент собирается получить фокус. Похоже на событие onfocus, которое не всплывает. Поэтому, если вы хотите узнать, получает ли фокус элемент или его ребенок, вы должны использовать событие onfocusout.Не поддерживается в FireFox.2
onfocusoutПроисходит, когда элемент собирается терять фокус. Похоже на событие onblur, но onblur событие не всплывает. Поэтому, если вы хотите узнать, теряет ли фокус элемент или его ребенок, вы должны использовать событие onfocusout. Не поддерживается в FireFox.2
onblurСобытие возникает, когда элемент теряет фокус, т.е. курсор покидает этот элемент.2
onchangeСобытие происходит, когда содержимое элемента формы, выделения или выбора изменяется (для элементов <input>, <select>, and <textarea>)2
oninputСобытие происходит, когда происходит ввод текста в элемент3
oninvalidПроисходит, когда элемент заполнен неверно3
onresetСобытие происходит при сбросе формы (аналогично нажатию на кнопку типа reset)2
onsearchСобытие происходит, когда пользователь набирает что-либо в поле поиска (для <input type="search">)3
onselectНаступает, когда пользователь выделяет текст (или его часть) в поле (для элементов <input> and <textarea>)2
onsubmitСобытие возникает при отправке формы и должно обрабатываться для <form>2

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

События перетаскивания (Drag Events)
СобытиеОписаниеУровень DOM
ondragСобытие возникает, когда элемент перетаскивается3
ondragstartСобытие возникает, когда пользователь начинает перетаскивать элемент3
ondragendСобытие происходит, когда пользователь закончил перетаскивание элемента3
ondragenterПроисходит, когда элемент перетаскивания входит в целевую точку другого элемента.3
ondragleaveСобытие происходит, когда элемент перетаскивания оставляет цель удаления.3
ondragoverСобытие происходит, когда элемент перетаскивания находится над целевой точкой3
ondropСобытие происходит, когда элемент перетаскивания удаляется по целевой точке3

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

Для того чтобы события приводили к каким-то изменениям на html-странице, в JavaScript записываются обработчики событий в виде функций. Вы можете прочитать подробней об этом в статье "Обработка событий в JavaScript".

На основе статьи W3CScholls

Автор: Админ

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *