События

Введение в обработку событий

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

Для взаимодействия с пользователем в JavaScript определен механизм событий. Например, когда пользователь нажимает кнопку, то возникает событие нажатия кнопки. В коде JavaScript мы можем определить возникновение события и как-то его обработать.

В JavaScript есть следующие типы событий:

  • События мыши (перемещение курсора, нажатие мыши и т.д.)

  • События клавиатуры (нажатие или отпускание клавиши клавиатуры)

  • События жизненного цикла элементов (например, событие загрузки веб-станицы)

  • События элементов форм (нажатие кнопки на форме, выбор элемента в выпадающем списке и т.д.)

  • События, возникающие при изменении элементов DOM

  • События, возникающие при касании на сенсорных экранах

  • События, возникающие при возникновении ошибок

Рассмотрим простейшую обработку событий. Например, на веб-странице у нас есть следующий элемент div:

<div id="rect" onclick="alert('Нажато')" style="width:50px;height:50px;background-color:blue;"></div>

Здесь определен обычный блок div, который имеет атрибут onclick, который задает обработчик события нажатия на блок div. То есть, чтобы обработать какое-либо событие, нам надо определить для него обработчик. Обработчик представляет собой код на языке JavaScript. В данном случае обработчик выглядит довольно просто:

alert('Нажато')

И при нажатии на кнопку будет выскакивать сообщение:

Обработка событий в JavaScript

Также можно было бы вынести все действия по обработке события в отдельную функцию:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
</head>
<body>
<div id="rect" onclick="displayMessage()" style="width:50px;height:50px;background-color:blue;"></div>
<script>
function displayMessage(){
	
	alert('Нажато');
}
</script>
</body>
</html>

Теперь обработчиком события будет выступать функция displayMessage.

Передача параметров в обработчик события

В обработчик можно передавать параметры. Например, мы можем передать текущий объект, на котором возникает событие:

<a href="page1.html" onclick="return handler(this)">Станица 1</a>
<script>
function handler(obj){
	
	alert(obj.href);
	return false;
}
</script>

Ключевое слово this указывает на текущий объект ссылки, на которую производится нажатие. И в коде обработчика мы можем получить этот объект и обратиться к его свойствам, например, к свойству href.

Кроме того, надо отметить, что здесь обработчик возвращает результат. Хотя в первом примере с блоком div от обработчика не требовалось возвращения результата. Дело в том, что для некоторых обработчиков можно подтвердить или остановить обработку события. Например, нажатие на ссылку должно привести к переадресации. Но возвращая из обработчика false, мы можем остановить стандартный путь обработки события, и переадресации не будет. Если же возвращать значение true, то событие обрабатывается в стандартном порядке.

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

<a href="page1.html" onclick="handler(this)">Станица 1</a>
<script>
function handler(obj){
	
	alert(obj.href);
}
</script>

Кроме непосредственно элемента-источника события в обработчик мы можем передавать объект event. Этот объект не определяется разработчиком, это просто аргумент функции обработчика, который хранит всю информацию о событии. Например:

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

В данном случае с помощью свойства type объекта event получаем тип события (в данном случае тип click).

Помощь сайту
WebMoney
  • P378451176208
  • Z280152397659
ЮMoney/Яндекс-Деньги
  • 410011174743222
PayPal
  • metanit22@mail.ru
Перевод на карту
  • Номер карты: 4048415020898850