JS События

Объект Event

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

bubbles: возвращает true, если событие является восходящим. Например, если событие возникло на вложенном элементе, то оно может быть обработано на родительском элементе.
cancelable: возвращает true, если можно отменить стандартную обработку события
currentTarget: определяет элемент, к которому прикреплен обработчик события
defaultPrevented: возвращает true, если был вызван у объекта Event метод preventDefault()
eventPhase: определяет стадию обработки события
target: указывает на элемент, на котором было вызвано событие
timeStamp: хранит время возникновения события
type: указывает на имя события

Например:

	<!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(event){
	
	console.log("Тип события: " + event.type);
	
	console.log(event.target);
	}
	var rect = document.getElementById("rect");
	rect.addEventListener("click", handler);
	
	</script>
	</body>
	</html>

Причем в данном случае свойство target представляет собой элемент, поэтому мы можем манипулировать им как и любыми другими узлами и элементами DOM. Например, изменим фоновый цвет:

	function handler(e){
	
	e.target.style.backgroundColor = "red";
	}

Остановка выполнения события

С помощью метода preventDefault() объекта Event мы можем остановить дальнейшее выполнение события. В ряде случаев этот метод не играет большой роли. Однако в некоторых ситуаций он может быть полезен. Например, при нажатии на ссылку мы можем с помощью дополнительной обработки определить, надо ли переходить по ссылке или надо запретить переход. Или другой пример: пользователь отправляет данные формы, но в ходе обработки в обработчике события мы определили, что поля формы заполнены неправильно, и в этом случае мы также можем запретить отправку.

Например, запретим переход по ссылке после 12 часов:

	<a href="http://google.com" id="link">Поиск</a>
	<script>
	function linkHandler(e){
	
	var date = new Date();
	var hour = date.getHours();
	console.log(hour);
	if(hour>12){
	
	e.preventDefault();
	document.write("После 12 переход запрещен");
	}
	}
	var link = document.getElementById("link");
	link.addEventListener("click", linkHandler);
	</script>

Output