В 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>

Посмотреть на то, какое событие клавиатуры в данный момент происходит и какие клавиши были нажаты, можно в примере ниже.

See the Pen Keyboard Events by Elen (@ambassador) on CodePen.

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

События окон/фреймов/объектов (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".

Примечание: на самом деле событий намного больше, в таблицах приведены наиболее используемые. Для того чтобы посмотреть список событий, которые может обрабатывать браузер, можно воспользоваться кодом:

Объект события (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 - по вертикали относительно левого верхнего угла экрана.
movementX, movementY (для мыши) возвращают информацию о координате X и Y указателя относительно позиции последнего события mousemove.
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 не будет опубликован. Обязательные поля помечены *