// I am important!!!
}
Любой код, который мы поместим в обработчик событий, будет выполнен, когда событие, за которым следит наша функция addEventListener, будет услышано.
Простой пример
Лучшим способом разобраться в этом материале будет рассмотрение его в действии. Чтобы попутно проработать пример самим, добавьте в HTML-документ следующую разметку и код:
<!DOCTYPE html>
<html>
<head>
<title>Click Anywhere!</title>
</head>
<body>
<script>
document.addEventListener("click", changeColor, false);
function changeColor() {
document.body.style.backgroundColor = "#FFC926";
}
</script>
</body>
</html>
Если мы просмотрим наш документ в браузере, то изначально увидим пустую страницу (рис. 31.1).
Но все изменится, если щелкнуть в любом месте этой страницы. По завершении щелчка (то есть как только вы отпустите кнопку мыши) цвет фона страницы изменится на желтый (рис. 31.2).
Причина в коде:
document.addEventListener("click", changeColor, false);
function changeColor() {
document.body.style.backgroundColor = "#FFC926";
}
Вызов addEventListener идентичен тому, что мы уже видели, поэтому его можно пропустить. Вместо этого давайте обратим внимание на обработчика событий changeColor.
document.addEventListener("click", changeColor, false);
function changeColor() {
document.body.style.backgroundColor = "#FFC926";
}
Рис. 31.1. Просто пустая страница
Рис. 31.2. Страница становится желтой после щелчка
Эта функция вызывается, как только событие click в document будет услышано. Когда происходит вызов этой функции, она устанавливает фоновый цвет как желтый. Если связать это с самым началом, где мы в общих чертах обсуждали принцип работы приложений, то вот как будет выглядеть наш пример:
Надеюсь, что теперь все стало понятно. Вы только что изучили один из важнейших принципов работы, с которым предстоит сталкиваться постоянно. Но это еще не все.
Аргументы и типы событий
Наш обработчик событий помимо вызова при срабатывании события совершает и другие действия — обеспечивает доступ к основному объекту события в виде своего аргумента. Чтобы с легкостью обращаться к объекту события, нужно изменить сигнатуру обработчика событий этого аргумента.
Вот пример, в котором мы указываем имя event, чтобы сослаться на наш аргумент события:
function myEventHandler(event) {
// материал для обработки событий для поддержки
}
Обработчик событий — это по-прежнему простая скучная функция, которая просто получает один аргумент — аргумент события. Можно использовать любой доступный идентификатор для этого аргумента, но я склоняюсь к использованию event или просто e, потому что именно так делают все крутые ребята. Тем не менее технически будет верен и следующий идентификатор:
function myEventHandler(isNyanCatReal) {
// материал для обработки событий
}
Нюанс в том, что аргумент события указывает на объект события и этот объект передается как часть срабатывания события. Есть причина, по которой мы уделяем внимание такому, казалось бы, типичному и скучному явлению. Этот объект события содержит свойства, которые связаны со сработавшим событием. Событие, запущенное кликом мыши, будет иметь отличные свойства в сравнении с событием, запущенным нажатием клавиши клавиатуры, загрузкой страницы, анимацией и многим другим. Большинство событий будут иметь свое собственное уникальное поведение, на которое мы будем опираться, а объект события — это наше окно в эту их уникальность.
Несмотря на разнообразие событий и итоговых объектов событий, которые мы можем получить, у них есть некоторые общие свойства. Эта общая часть определяется тем, что все объекты событий происходят от основного типа Event (технически подразумевается Interface). Ниже перечислены некоторые из известных свойств типа Event, которые мы будем использовать:
1. currentTarget
2. target
3. preventDefault
4. stopPropagation
5. type
Чтобы как следует понять назначение этих свойств, нужно углубиться в понимание самих событий. Мы пока еще не достигли нужной глубины, поэтому просто знайте, что они существуют. В ближайших главах мы с ними встретимся.
Удаление слушателя событий
Иногда понадобится удалять слушателя событий из элемента. Делается это с помощью злейшего врага addEventListener функции removeEventListener:
something.removeEventListener(eventName, eventHandler, false);