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

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

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

События мыши

События мыши (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".

Объект события (Event Object)

При обработке события для элемента внутри функции-обработчика чаще всего используется ключевое слово this для доступа к объекту, для которого это событие наступило. Однако, кроме этого, вы можете воспользоваться рядом свойств, которые браузер автоматически передает в функцию-обработчика в качестве  единственного параметра. И этим параметром является объект Event, в котором собрана вся информация о событии. Посмотрим, какие свойства объекта Event мы можем использовать:

Свойства объекта события
СвойствоОписание
typeтип события
targetэлемент, на котором было вызвано событие (т.е. тот, для которого была вызвана функция-обработчик события)
currentTarget элемент, к которому прикреплен обработчик события/для которого наступает событие
relatedTarget (для мыши)элемент с которого пришел курсор мыши при обработке события mouseover, и на элемент, который сейчас находится под курсором при обработке события mouseout.
bubblesлогическое значение (true|false), указывающее может ли данное событие всплывать
eventPhaseчисло, показывающее на каком этапе произошло событие (1 - этап погружения (перехвата), 2 - на этапе цели, 3 - на этапе всплытия).
which (для мыши)возвращает число, указывающее, какая кнопка мыши была нажата (1 - левая кнопка, 2 - средняя кнопка, 3 - правая кнопка). Часто используется вместе с событием mousedown. Данное свойство может использоваться для получения дополнительной информации о событие, связанном с нажатием кнопки мыши.
button (для мыши)возвращает число, указывающее, какая кнопка мыши была нажата. Может быть использовано для получения дополнительной информации о событие, связанном с нажатием кнопки мыши.
detail (для мыши)возвращает число, указывающее сколько раз была нажата кнопка мыши в некоторой области за короткий промежуток времени.
clientX, clientY (для мыши)возвращают координаты курсора мыши: clientX - по горизонтали, clientY - по вертикали относительно левого верхнего угла клиентской области браузера.
pageX, pageY (для мыши)возвращают координаты курсора мыши от левой и верхней границы документа до курсора с учетом прокрутки. Могут совпадать с clientX (clientY) или быть больше на величину прокрутки по горизонтали (вертикали)
screenX, screenY (для мыши)возвращают информацию о положении курсора: screenX - по горизонтали, screenY - по вертикали относительно левого верхнего угла экрана.
charCode (для клавиатуры)возвращает Unicode-код символа нажатой клавиши (при обработке события keypress). Если данное свойство использовать для получения дополнительной информации о событиях keydown или keyup, то оно всегда вернёт "0".
keyCode, which (для клавиатуры)возвращает Unicode-код символа (при обработке события keypress) или код ключа Unicode (при обработке событий keydown и keyup).
altKey, ctrlKey, metaKey, shiftKey (для мыши и клавиатуры)возвращает true|false в зависимости от того, была ли нажата соответствующая клавиша (Alt, Ctrl, Meta и Shift ) , когда произошло событие.
location (для клавиатуры)возвращает число, указывающее на область клавиатуры или устройства в котором расположена нажатая клавиша (0 - основная область клавиатуры, 1 - область, в которой расположена левая клавиша CTRL или левая клавиша ALT, 2 - область, в которой расположена правая клавиша CTRL или правая клавиша ALT, 3 - цифровой клавиатура).
timestampчисло (дата), когда наступило событие

Кроме свойств, вы можете также использовать методы объекта Event:

Методы объекта события
МетодОписание
preventDefault() отменяет стандартное поведение браузера, например, переход по ссылке.
stopPropagation()предотвращает всплытие события

Обычно вы можете получить данные о событии из объекта Event при записи функции-обработчика примерно в таком виде:

Всплытие событий

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

Код примера предполагает, что внутри <div id="testBubble"> расположено несколько абзацев. В каждом абзаце есть кнопка с классом close <button class="close">&times;</button>. В скрипте обработка события клика назначена для 3-х элементов:

  1. Для родительского элемента <body> для всех элементов функция-обработчик меняет цвет фона <div id="testBubble"> случайным образом.
  2. Для каждого абзаца другая  функция-обработчик меняет фон и рамка слева для абзаца - они описаны в классе blue.
  3. Для кнопки с классом close третья функция-обработчик назначает класс fadeOut для абзаца, в котором находится, и по окончании анимации, которая в этом классе описана, удаляет абзац.

При этом любой клик по абзацу не только меняет его класс на .blue и обратно, но и вызывает изменение фона родительского блока, т.к. в нем срабатывет собственная функция-обработчик клика. Если же вы щелкаете на кнопке в правом верхнем углу каждого абзаца, то запускается вся цепочка функций-обработчиков - меняются фоны абзаца, родительского <div id="testBubble"> и абзац исчезает.

Вы можете проверить сами, как работает пример всплытия события клика:

Пример всплытия события клика

Кликните на абзаце и на кнопке в правом верхнем углу

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis tempora perspiciatis doloremque, minima dolorem. Quasi aliquid, voluptatem quisquam necessitatibus autem natus, maxime assumenda, voluptatibus, eius magni expedita dicta accusamus quaerat!

Commodi soluta magnam, molestias praesentium quis inventore. Minima maxime obcaecati ad, voluptates praesentium repudiandae sit esse delectus tempora aliquid culpa animi incidunt, fuga, necessitatibus tenetur laborum, eos optio alias. Laboriosam?

Aliquid sint sunt porro in incidunt, iusto, repudiandae fugiat itaque accusantium magnam doloremque nam! Libero, illo, iste! Dolores, adipisci blanditiis sapiente eius placeat, quam suscipit pariatur nisi veniam, laudantium praesentium.

Expedita dignissimos similique, enim possimus error! Consectetur quae enim magnam magni ipsa accusantium sunt possimus asperiores! Dolore assumenda, reiciendis soluta voluptatem quisquam tenetur ex cumque, labore, repellendus eveniet nemo provident.

Suscipit a, tempore ipsum quaerat voluptatem dolorem esse maiores blanditiis maxime ullam vitae eaque inventore quidem fugit sapiente eius veritatis totam ea? Molestiae iure voluptates est sapiente architecto ipsum. Possimus.

Возможно, вы увидели внизу <div id="testBubble"> кнопку "Остановить всплытие при клике на кнопке". Она предназначена для отмены функции hideParagraf(evt) и замены ее на функцию hideOnlyParagraf(evt), в которую была добавлена одна строчка event.stopPropagation() . Именно этот метод объекта  Event позволяет остановить всплытие события и прервать обработку клика на кнопке, удаляющей параграф.

Если вы нажмете на эту кнопку, а затем будете щелкать на кнопки с крестиком, то не увидите изменения фона абзаца или содержащего его родительского элемента <div id="testBubble">. При этом клик по тексту абзаца будет запускать цепочку кликов и в абзаце, и в <body>.

Автор: Админ

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

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