Объект Event

Последнее обновление: 1.11.2015

При обработке события браузер автоматически передает в функцию обработчика в качестве параметра объект 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>
Помощь сайту
WebMoney
  • P378451176208
  • Z280152397659
ЮMoney/Яндекс-Деньги
  • 410011174743222
PayPal
  • metanit22@mail.ru
Перевод на карту
  • Номер карты: 4048415020898850