События
Введение в обработку событий
Для взаимодействия с пользователем в 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).
Output