2 of 19

Понятие события

Событие – это сигнал от браузера о том, что что-то произошло.

3 of 19

События мыши

click – происходит, когда кликнули на элемент левой кнопкой мыши (на устройствах с сенсорными экранами оно происходит при касании).
contextmenu – происходит, когда кликнули на элемент правой кнопкой мыши.
mouseover / mouseout – когда мышь наводится на / покидает элемент.
mousedown / mouseup – когда нажали / отжали кнопку мыши на элементе.
mousemove – при движении мыши;
dblclick – вызывается двойным кликом на элементе.

4 of 19

События на элементах управления

submit – пользователь отправил форму <form>.
focus – пользователь фокусируется на элементе, например нажимает на <input>.

5 of 19

Клавиатурные события

keydown и keyup – когда пользователь нажимает / отпускает клавишу.

6 of 19

События документа

DOMContentLoaded – когда HTML загружен и обработан, DOM документа полностью построен и доступен.

7 of 19

Обработчики событий

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

8 of 19

Способы назначить событию обработчик:

Использование атрибута HTML
Использование свойства DOM-объекта

9 of 19

Использование атрибута HTML

Обработчик может быть назначен прямо в разметке, в атрибуте, который называется on<событие>.
Например, чтобы назначить обработчик события click на элементе input, можно использовать атрибут onclick:

10 of 19

Использование атрибута HTML

Атрибут HTML-тега – не самое удобное место для написания большого количества кода, поэтому лучше создать отдельную JavaScript-функцию и вызвать её там.

11 of 19

Использование свойства DOM-объекта

Можно назначать обработчик, используя свойство DOM-элемента on<событие>.

Например, elem.onclick:

12 of 19

Использование свойства DOM-объекта

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

В примере ниже назначение через JavaScript перезапишет обработчик из атрибута

13 of 19

Объект события

Когда происходит событие, браузер создаёт объект события, записывает в него детали и передаёт его в качестве аргумента функции-обработчику.

14 of 19

Свойства объекта event

event.type - тип события, в данном случае "click".
event.currentTarget - элемент, на котором сработал обработчик..
event.clientX / event.clientY - координаты курсора в момент клика относительно окна, для событий мыши.

15 of 19

Всплытие

Когда на элементе происходит событие, обработчики сначала срабатывают на нём, потом на его родителе, затем выше и так далее, вверх по цепочке предков.
Пусть есть 3 вложенных элемента FORM>DIV>P с обработчиком на каждом:

16 of 19

Всплытие

17 of 19

Всплытие

Клик по внутреннему <p> вызовет обработчик onclick:

Сначала на самом <p>.
Потом на внешнем <div>.
Затем на внешнем <form>.
И так далее вверх по цепочке до самого document.

Этот процесс называется «всплытием», потому что события «всплывают» от внутреннего элемента вверх через родителей подобно тому, как всплывает пузырёк воздуха в воде.

18 of 19

Погружение

Существует ещё одна фаза из жизненного цикла события – «погружение» (иногда её называют «перехват»). Она очень редко используется в реальном коде, однако тоже может быть полезной.
Стандарт DOM Events описывает 3 фазы прохода события:
фаза погружения (capturing phase) – событие сначала идёт сверху вниз.
фаза цели (target phase) – событие достигло целевого(исходного) элемента.
фаза всплытия (bubbling stage) – событие начинает всплывать.

19 of 19

Погружение: клике по ячейке <td>, расположенной внутри таблицы