JavaScript с нуля

Аргументы и типы событий

Наш обработчик событий помимо вызова при срабатывании события совершает и другие действия — обеспечивает доступ к основному объекту события в виде своего аргумента. Чтобы с легкостью обращаться к объекту события, нужно изменить сигнатуру обработчика событий этого аргумента.

Вот пример, в котором мы указываем имя 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);

Как видно из примера, эта функция получает в точности такие же типы аргументов, что и функция addEventListener. Причина тому проста. Когда мы прослушиваем событие в элементе или объекте, JavaScript использует eventName, eventHandler и значение true / false, чтобы опознать слушателя событий. Чтобы удалить этого слушателя событий, нам нужно указать в точности такие же аргументы. Вот пример:

document.addEventListener("click", changeColor, false);

document.removeEventListener("click", changeColor, false);

function changeColor() {

document.body.style.backgroundColor = "#FFC926";

}

Слушатель событий, которого мы добавили в первой строке, полностью нейтрализован вызовом removeEventListener в выделенной второй строке. Если вызов removeEventListener использует аргументы, отличные от указанных в соответствующем вызове addEventListener, то его усилия будут проигнорированы и прослушивание продолжится.

КОРОТКО О ГЛАВНОМ

Что ж, это все, что нужно для ознакомления с событиями. Помните: у вас есть функция addEventListener, которая позволяет зарегистрировать функцию обработчика событий. Эта функция обработчика событий будет вызываться при запуске события, которое примет прослушиватель событий. Хотя мы коснулись некоторых других тем, они станут более понятными, если рассмотреть их в контексте более сложных примеров, связанных с событиями.