JS События

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

Встроенные обработчики

В прошлой теме были рассмотрены встроенные обработчики (inline event handler), которые определяются в коде элемента с помощью атрибутов: <div id="rect" onclick="handler(event)"></div> Хотя этот подход прекрасно работает, но он имеет кучу недостатков:

Код html смешивается с кодом JavaScript, в связи с чем становится труднее разрабатывать, отлаживать и поддерживать приложение
Обработчики событий можно задать только для уже созданных на веб-странице элементов. Динамически создаваемые элементы в этом случае лишаются возможности обработки событий
К элементу для одного события может быть прикреплен только один обработчик
Нельзя удалить обработчик без изменения кода

Свойства обработчиков событий

Проблемы, которые возникают при использовании встроенных обработчиков, были призваны решить свойства обработчиков. Подобно тому, как у html-элементов есть атрибуты для обработчиков, так и в коде javascript у элементов DOM мы можем получить свойства обработчиков, которые соответствуют атрибутам:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
#rect{
width:50px;
height:50px;
background-color:blue;
}
</style>
</head>
<body>
<div id="rect" </div>
<script>
function handler(e){
	
alert(e.type); // получаем тип события
document.getElementById("rect").onclick = handler;
}
</script>
</body>
</html>

В итоге нам достаточно взять свойство onclick и присвоить ему функцию, используемую в качестве обработчика. За счет этого код html отделяется от кода javascript.

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

Слушатели событий

Несмотря на то, что свойства обработчиков решают ряд проблем, которые связаны с использованием атрибутов, в то же время это также не оптимальный подход. Еще один способ установки обработчиков событий представляет использование слушателей.

Для работы со слушателями событий в JavaScript есть объект EventTarget, который определяет методы addEventListener() (для добавления слушателя) и removeEventListener() для удаления слушателя. И поскольку html-элементы DOM тоже являются объектами EventTarget, то они также имеют эти методы. Фактически слушатели представляют те же функции обработчиков.

Метод addEventListener() принимает два параметра:

название события без префикса on

функцию обработчика этого события.

Например:

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<style>
	#rect{
	width:50px;
	height:50px;
	background-color:blue;
	}
	</style>
	</head>
	<body>
	<div id="rect" </div>
	<script>
	var rect = document.getElementById("rect");
	
	rect.addEventListener("click", function (e) {
	alert(e.type);
	});
	</script>
	</body>
	</html>

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

Удаление слушателя аналогично добавлению:


	rect.removeEventListener("click", handler);

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

	var clicks = 0;
	function handlerOne(e){
	
	alert(e.type);
	}
	function handlerTwo(e){
	
	clicks++;
	var newNode = document.createElement("p");
	newNode.textContent = "произошло нажатие " + clicks;
	document.body.appendChild(newNode);
	}
	var rect = document.getElementById("rect");
	// прикрепляем первый обработчик
	rect.addEventListener("click", handlerOne);
	// прикрепляем второй обработчик
	rect.addEventListener("click", handlerTwo);

Test