События в JavaScript

29.01.2020

Введение

При исполнение JavaScript'a в браузере применяется событийная модель поведения. Любая логика активируется определенным событием. Например, страница загрузилась, пользователь нажал на кнопку, пришел ответ на запрос и прочие. В браузере присутствует огромное количество событий.

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

Когда возникает событие, нужно его обработать. Для этого нужно определить функцию, которая будет это делать. Функцию называют обработчиком события. Для одного события можно зарегистрировать сколько угодно обработчиков. Существует 3 способа регистрации обработчиков событий.

  1. Встроенные обработчики событий. Можно прям в HTML разметке связать событие элемента с его обработчиком.
<a href="https://ya.ru" onclick="handleClick()">Link Ya</a>
  1. On-Событие обработчик. Основной способ регистрации обработчика событий. Можно регистрировать только один обработчик событий.
window.onload = () => {
	//window loaded
};

button.onclick = function(){
	//button clicked
};

Если вы захотите проверить есть ли уже обработчик события то можно написать следующее:

if ('onclick' in button) { // handler exists }
  1. С помощью метода addEventListener(). С помощью данного метода можно регистрировать сколько угодно обработчиков событий.
	const button = document.getElementById("my-button");
	button.addEventListener('click', function (event) {
		// button clicked
	});

Объект Event

При вызове обработчика событий в него попадает объект Event. Он содержит следующие свойства и методы:

  • target - элемент DOM, который создал событие
  • type - тип события
  • stopPropagation() - метод, который останавливает распространение события. Существует множество объектов наследников Event, такие как
  • MouseEvent
  • KeyboardEvent
  • FetchEvent
  • DragEvent и другие.

Распространение событий

Существует две модели распространения событий

  • Восходящая (bubbling)
  • Нисходящая (capturing)

Допустим у нас есть следующая страница:

	<div id="container">
		<button>Click Me</button>
	</div>

Вы хотите обрабатывать события когда пользователь нажал на кнопку. Вы имеете два обработчика событий, один на кнопке и один на контейнере. Следует запомнить, что когда происходит нажатие на дочернем элементе событие распространяется и на родительские элементы, если только вы не запретили распространение. Обработчики событий будут вызваны в определенном порядке, который определяется моделью распространения событий. Восходящая модель означает, что событие распространяется от элемента который был нажат, вверх к элементам которые располагаются выше, то есть являются предками. В нашем примере это button а потом #container.

Нисходящая модель распространения событий является альтернативой восходящей, более общие элементы вызываются и лишь в конце вызывается элемент, в котором произошло событие. По умолчанию все модели распространения событий - восходящие. Чтобы изменить модель распространения событий, нужно передать третим аргументов значение true в функцию addEventListener. Имейте в виду сначала выполняются все восходящие обработчики событий, а лишь потом нисходящие обработчики событий. Это можно объяснить следующим поведением, браузер проходит по всем DOM элементам страницы, начиная с Window и проваливаясь все ниже и ниже пока не найдет тот элемент который вызвал событие. Во время этого прохода и вызываются все обработчики.

Прекращение распространения

По умолчанию событие будет распространяться вверх по DOM дереву. Например

<html>
	<body>
		<div>
			<button id="my-button"> Click me </button>
		</div>
	</body>
</html>

При нажатие на кнопку button произойдёт событие Click, которое будет распространяться наверх. Чтобы прекратить его следует вызвать метод stopPropagtion на событии. То есть,

const button = document.getElementById('my-button');
button.addEventListener('click', event => {
	event.stopPropagation();
});

Часто используемые события

  • load - событие объекта window, возникает тогда когда загрузка страницы завершена.
  • click - когда произошло нажатие левой клавиши мыши на элементе.
  • dblclick - когда произошло двойное нажатие мыши.
  • mousedown - когда курсор произошло зажатие клавиши мыши над элементом
  • mousemove - когда происходит движение с нажатой клавишей мыши
  • mouseup - когда курсор произошло снятие зажатия клавиши мыши над элементом
  • keydown - когда зажата клавиша на клавиатуре
  • keyup - когда клавиша клавиатуры отпустили
  • scroll - при прокручивание страницы вызывается обработчик события scroll у объекта window
#jsbook#javascript

Еженедельная рассылка новостей

Введение в HTML

Глобальный объект в JavaScript