Обновлено: 01.11.2018 16:33

DOM - обработка событий (Events)

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

События могут генерироваться как пользователем (например: перемещение мышки) так и системой (например: законцилась анимация )

События могут быть разных типов, например:

нажатия клавиш мыши, перемещение курсора
нажатие клавиш клавиатуры
изменение размеров окна браузеа (закрытие окна)
загрузка страницы в окно
заполнение формы
воспроизведение видео
возникновение ошибок.

Реакция на события описывается через бработчики событий (events listeners или event handlers).

Браузер постоянно отслеживает все события, при его возникновении (event firing) он ищет назначенную этому событию фукцию-обработчик события и запускает её (если она найдена).

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

Типы событий

События, связанные с мышью (mouse events)

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

События клавиатуры (keyboard events)

Событие	Описание	DOM
onkeydown	Нажатие кнопки клавиатурв	2
onkeypress	Нажатие и отпускание кнопки клавиатуры	2
onkeyup	Отпускание кнопки клавиатуры	2

События объекта frame (frame/window events)

Собвтие	Описание	DOM
onabort	Загрузка документа в фрейм прервана	2
onbeforeunload	Начало загрузки документа в фрейм	2
onerror	Ошибка загрузки файла в фрейм	2
onhashchange	Изменился параметр anchor фрейма	3
onload	Загрузка документа в фрейм	2
onpageshow	Событие происходит, когда пользователь переходит на веб-страницу	3
onpagehide	Событие происходит, когда пользователь уходит с веб-страницы	3
onresize	Событие возникает, когда размер окна документа изменяется	2
onscroll	Событие происходит при прокрутке элемента	2
onunload	Событие происходит после выгрузки страницы (для <body>)	2

События, связанные с формой (form events)

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

События drag/drop

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

Clipboard - события

Событие	Описание	DOM
oncopy	Событие происходит, когда пользователь копирует содержимое элемента
oncut	Событие происходит, когда пользователь вырезает содержимое элемента
onpaste	Событие возникает, когда пользователь вставляет некоторый контент в элемент

Print - события

Событие	Описание	DOM
onafterprint	Событие происходит, когда страница начала печать, или если диалоговое окно печати закрывается	3
onbeforeprint	Событие происходит, когда страница будет напечатана	3

Media - события

Событие	Описание	DOM
onabort	The event occurs when the loading of a media is aborted	3
oncanplay	The event occurs when the browser can start playing the media (when it has buffered enough to begin)	3
oncanplaythrough	The event occurs when the browser can play through the media without stopping for buffering	3
ondurationchange	The event occurs when the duration of the media is changed	3
onemptied	The event occurs when something bad happens and the media file is suddenly unavailable (like unexpectedly disconnects)	3
onended	The event occurs when the media has reach the end (useful for messages like "thanks for listening")	3
onerror	The event occurs when an error occurred during the loading of a media file	3
onloadeddata	The event occurs when media data is loaded	3
onloadedmetadata	The event occurs when meta data (like dimensions and duration) are loaded	3
onloadstart	The event occurs when the browser starts looking for the specified media	3
onpause	The event occurs when the media is paused either by the user or programmatically	3
onplay	The event occurs when the media has been started or is no longer paused	3
onplaying	The event occurs when the media is playing after having been paused or stopped for buffering	3
onprogress	The event occurs when the browser is in the process of getting the media data (downloading the media)	3
onratechange	The event occurs when the playing speed of the media is changed	3
onseeked	The event occurs when the user is finished moving/skipping to a new position in the media	3
onseeking	The event occurs when the user starts moving/skipping to a new position in the media	3
onstalled	The event occurs when the browser is trying to get media data, but data is not available	3
onsuspend	The event occurs when the browser is intentionally not getting media data	3
ontimeupdate	The event occurs when the playing position has changed (like when the user fast forwards to a different point in the media)	3
onvolumechange	The event occurs when the volume of the media has changed (includes setting the volume to "mute")	3
onwaiting	The event occurs when the media has paused but is expected to resume (like when the media pauses to buffer more data)	3

Animation - события

Событие	Описание	DOM
animationend	The event occurs when a CSS animation has completed	3
animationiteration	The event occurs when a CSS animation is repeated	3
animationstart	The event occurs when a CSS animation has started	3

Transition - события

Событие	Описание	DOM
transitionend	The event occurs when a CSS transition has completed	3

Server-Sent - события

Событие	Описание	DOM
onerror	The event occurs when an error occurs with the event source
onmessage	The event occurs when a message is received through the event source
onopen	The event occurs when a connection with the event source is opened

Другие события

Событие	Описание	DOM
onmessage	The event occurs when a message is received through or from an object (WebSocket, Web Worker, Event Source or a child frame or a parent window)	3
onmousewheel	Deprecated. Use the onwheel event instead
ononline	The event occurs when the browser starts to work online	3
onoffline	The event occurs when the browser starts to work offline	3
onpopstate	The event occurs when the window's history changes	3
onshow	The event occurs when a <menu> element is shown as a context menu	3
onstorage	The event occurs when a Web Storage area is updated	3
ontoggle	The event occurs when the user opens or closes the <details> element	3
onwheel	The event occurs when the mouse wheel rolls up or down over an element	3

Touch - события

Событие	Описание	DOM
ontouchcancel	The event occurs when the touch is interrupted
ontouchend	The event occurs when a finger is removed from a touch screen
ontouchmove	The event occurs when a finger is dragged across the screen
ontouchstart	The event occurs when a finger is placed on a touch screen

Объект event

Когда происходит событие, браузер создает объект 'event', помещает в него детали события и передает его в качестве аргумента обработчику.

пример ниже выводит на консоль все свойства текущего объека event, созданного баузеом при клике мышкой по элементу ELEMENT .

function myFunc2(evnt){ console.log('Event: ', evnt); }

ELEMENT.addEventListener('click', myFunc2);

Константы

Константа	Описание	DOM
CAPTURING_PHASE	The current event phase is the capture phase (1)	1
AT_TARGET	The current event is in the target phase, i.e. it is being evaluated at the event target (2)	2
BUBBLING_PHASE	The current event phase is the bubbling phase (3)	3

Свойства

Свойство	Описание	DOM
bubbles	Returns whether or not a specific event is a bubbling event	2
cancelable	Returns whether or not an event can have its default action prevented	2
currentTarget	Returns the element whose event listeners triggered the event	2
defaultPrevented	Returns whether or not the preventDefault() method was called for the event	3
eventPhase	Returns which phase of the event flow is currently being evaluated	2
isTrusted	Returns whether or not an event is trusted	3
target	Returns the element that triggered the event	2
timeStamp	Returns the time (in milliseconds relative to the epoch) at which the event was created	2
type	Returns the name of the event	2
view	Returns a reference to the Window object where the event occured	2

Методы

Метод	Описание	DOM
preventDefault()	Cancels the event if it is cancelable, meaning that the default action that belongs to the event will not occur	2
stopImmediatePropagation()	Prevents other listeners of the same event from being called	3
stopPropagation()	Prevents further propagation of an event during event flow	2

Объект - MouseEvent

Свойство	Описание	DOM
altKey	Возвращает, была ли нажата клавиша «ALT» при запуске события мыши	2
button	Возвращает, какая кнопка мыши была нажата при запуске события мыши	2
buttons	Возвращает, какие кнопки мыши были нажаты при запуске события мыши	3
clientX	Возвращает горизонтальную координату указателя мыши относительно текущего окна, когда событие мыши было запущено	2
clientY	Возвращает вертикальную координату указателя мыши относительно текущего окна, когда событие мыши было запущено	2
ctrlKey	Возвращает, была ли нажата клавиша CTRL при запуске события мыши	2
detail	Возвращает число, указывающее, сколько раз щелкнули мышь	2
metaKey	Возвращает, была ли нажата клавиша «META» при срабатывании события	2
pageX	Возвращает горизонтальную координату указателя мыши относительно документа, когда событие мыши было запущено
pageY	Возвращает вертикальную координату указателя мыши относительно документа, когда событие мыши было запущено
relatedTarget	Возвращает элемент, связанный с элементом, вызвавшим событие мыши	2
screenX	Возвращает горизонтальную координату указателя мыши относительно экрана, когда событие было вызвано	2
screenY	Возвращает вертикальную координату указателя мыши относительно экрана, когда событие было инициировано	2
shiftKey	Возвращает, была ли нажата клавиша «SHIFT» при срабатывании события	2
which	Возвращает, какая кнопка мыши была нажата при запуске события мыши	2

Объект - KeyboardEvent

Свойство	Описание	DOM
altKey	Возвращает, была ли нажата клавиша «ALT» при срабатывании события	2
ctrlKey	Возвращает, была ли нажата клавиша CTRL при срабатывании события клавиатуры	2
charCode	Возвращает код символа Юникода клавиши, которая вызвала событие onkeypress	2
key	Возвращает для нажатой клавиши её значение	3
location	Возвращает местоположение ключа на клавиатуре или устройстве	3
metaKey	Возвращает, была ли нажата клавиша «meta» при запуске события	2
shiftKey	Возвращает, была ли нажата клавиша «SHIFT» при срабатывании события	2
which	Возвращает код символа Юникода ключа, вызвавшего событие onkeypress, или код ключа Unicode ключа, вызвавшего событие onkeydown или onkeyup	2

HashChangeEvent - объект

Property	Описание	DOM
newURL	Returns the URL of the document, after the hash has been changed
oldURL	Returns the URL of the document, before the hash was changed

PageTransitionEvent - объект

Property	Описание	DOM
persisted	Returns whether the webpage was cached by the browser

FocusEvent - объект

Property	Описание	DOM
relatedTarget	Returns the element related to the element that triggered the event	3

AnimationEvent - объект

Property	Описание	DOM
animationName	Returns the name of the animation
elapsedTime	Returns the number of seconds an animation has been running

TransitionEvent - объект

Property	Описание	DOM
propertyName	Returns the name of the CSS property associated with the transition
elapsedTime	Returns the number of seconds a transition has been running

WheelEvent - объект

Property	Описание	DOM
deltaX	Returns the horizontal scroll amount of a mouse wheel (x-axis)	3
deltaY	Returns the vertical scroll amount of a mouse wheel (y-axis)	3
deltaZ	Returns the scroll amount of a mouse wheel for the z-axis	3
deltaMode	Returns a number that represents the unit of measurements for delta values (pixels, lines or pages)	3

Регистрация обработчика событий

Зарегистриовать обработчик событий можно разными способами.

Присвоить значение специальному атрибуту (onclick, onkeypress, onmouseenter, ...) при описании HTMl тега. Например:

<button id='myButton1' onclick="alert('My event!');">Press me</button>

Можно его изменить с помощью соответствующего свойства объекта element:

document.getElementById('myButton1').onclick = 'alert("New action")'

Можно использовать метод объекта element - addEventListener(event, listener). Например:

document.getElementById('myButton1').addEventListener('click', click2); function click2(){ alert('Listener 1 - click2()'); }

или

document.getElementById('myButton1').addEventListener('click', () => { alert ('Listener 1!!'); });

Если в этом примере ипользовать оба способа, то к элементу id=myButton1 , к событию click будут привязаны сразу 2 обработчика.

Удаление обработчика событий

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

Привязать обработчик к элементу

<button id="myButton1" onclick='alert("Event listener connected")'>Click me</button>

или

document.getElementById('myButton1').onclick='alert("Event listener connected")';

Удалить его

document.getElementById('myButton1').onclick='';

Можно использовать метод элемента removeEventListener(событие, имя_обработчика)

Привязать

function myFunc2(){ alert("Listener myFunc2() response"); } document.getElementById('myButton1').addEventListener('click', myFunc2);

Удалить

document.getElementById('myButton1').removeEventListener('click', myFunc2);

Удалить все обработчики событий у элемента можно, например, клонировав элемент (метод cloneNode()) , при этом обработчики событий не клонируются.

function removeAllEventListeners(elmntID){ var oldElement = document.getElementById(elmntID); var newElement = oldElement.cloneNode(true); oldElement.parentNode.replaceChild(newElement, oldElement); // cleanup out1 out1.innerHTML = ''; }

Events bubbling, capturing

event.target - элемент, который инициировал событие.

event.currentTarget - текущий элемент, обрабатывающий событие.

event bubbling (event propagation) - обработка события, котоое инициировал элемент, всеми его родительскими элементами (снизу вверх или от дочернего элемента).

event capturing -

event.eventPhase - фаза обработки события (capturing=1, bubbling=3)

Стандартные события DOM проходят фазы обработки событий (event.eventPhase):

Константа	Значение	Описание
Event.NONE	0	Ни одно событие не обрабатывается
Event.CAPTURING_PHASE	1	Событие передаётся через объекты-предки целевого элемента (event.target). Этот процесс начинается с объекта Window, затем - Document, затем HTMLHtmlElement и т. д. через элементы до тех пор, пока не будет достигнут непоседственно родительский элемент. Обработчики событий, зарегистрированные для Capturing (при вызове EventTarget.addEventListener (EVENT, HANDLER, useCapture)), запускаются на этом этапе.
Event.AT_TARGET	2	Событие достигло целевого элемента. В это время вызываются обработчики событий, зарегистрированные для этой фазы. Если Event.bubbles принимает значение false, обработка события завершается после завершения этой фазы.
Event.BUBBLING_PHASE	3	Событие распространяется к предкам целевого элемента, в обратном порядке, начиная с его непосредственного родителя, и в конечном итоге достигает объекта Window. Этот процесс называется bubbling происходит только в том случае, если Event.bubbles принимает значение true. Обработчики событий, зарегистрированные для этой фазы, запускаются в это время.

Capturing phase - событие переходит к элементу
Target phase - событие достигло целевого элемента
Bubbling phase - событие "поднимается" от элемента

Программирование на JavaScript, DOM

Наши преимущества

Регистрация на сайте

Дополнительные материалы