Вы здесь: Главная » 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 Наступает, когда пользователь жмет на клавишу 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 Наступает, когда элемент получает фокус, т.е. в него помещается курсор или выполнен переход клавишей Tab 2
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

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

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