События в JavaScript

Если вы не заметили, большинство приложений и веб-сайтов довольно скучны, если существуют сами по себе. Они встречают вас помпезным и броским интерфейсом, однако впечатление от него очень быстро сходит на нет, если вы не начинаете взаимодействовать с ними:

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

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

Вперед!

Что такое события?

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

Вы можете заполнить пробелы в этом заявлении бесчисленным множеством вещей. Первый пробел сообщает, что что-то происходит. Второй пробел описывает реакцию на это. Вот несколько примеров заполнения этого заявления:

Это универсальная модель применима ко всем кодам, которые мы с вами составляли. Эта модель также относится ко всем кодам, которые когда-либо составляли все ваши знакомые разработчики / дизайнеры для своих приложений.

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

Событие это не более чем сигнал. Он сообщает, что что-то только что произошло. Этим что-то может быть нажатие кнопки мыши. Это может быть нажатие клавиши на клавиатуре. Это может быть изменение размера вашего окна. Это может быть просто только что произошедшая загрузка вашего документа.

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

Возвращаемся к нашей модели. События составляют первую половину заявления:

События определяют вещь, которая происходит. Они посылают сигнал. Вторая часть модели определяет реакцию на событие:

В конце концов, какая польза от сигнала, если на той стороне нет никого, кто ожидает его, а затем предпринимает соответствующие действия?! Хорошо - теперь, когда у вас есть достаточное понимание того, что такое события, давайте посмотрим, как протекает жизнь событий в заповеднике, известном как JavaScript.

События и JavaScript

Учитывая важность событий, не удивительно, что в JavaScript реализованы многочисленные инструменты работы с ними. Существуют две основные вещи, которые вы должны сделать, чтобы работать с событиями:

• Отслеживание событий;
• Реакция на события.

Эти два шага кажутся довольно простыми, но не забывайте, что мы имеем дело с JavaScript. Простота является всего лишь дымовой завесой, за которой могут скрываться серьезные проблемы, которые вы получите, если предпримете неправильные действия. Возможно, я слишком драматизирую? Что ж, разберемся вместе.

1. Отслеживание событий

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

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

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

То, как вы используете эту функцию, выглядит следующим образом:

source.addEventListener(eventName, eventHandler, false);

Давайте проанализируем, что означает каждая из частей этой функции.

Источник

Вы вызываете addEventListener через элемент или объект, в котором хотите прослушивать события. Как правило, это DOM-элемент, но это также может быть документ, окно или любой другой объект, который может генерировать события.

Имя события

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

В последующих статьях мы рассмотрим многие из этих событий более подробно. А сейчас просто обратите внимание на событие click, так как мы будем использовать его дальше.

Обработчик событий

В качестве второго аргумента вы должны указать функцию, которая будет вызываться, когда событие зафиксировано. Эта функция называется обработчик событий. Чуть ниже я расскажу о ней подробно.

Захватывать или не захватывать, вот в чем вопрос!

Последний аргумент может принимать значения true или false.

Подытоживаем все выше сказанное

Теперь, когда вы познакомились с функцией addEventListener, давайте подытожим все с помощью одного реального примера:

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

В данном примере наша функция addEventListener прикреплена к объекту документа. Когда зафиксировано событие click, она в ответ на это событие вызывает функцию changeColor (также известную, как обработчик событий). Это подводит нас вплотную к понятию реакции на события, о чем мы поговорим в следующем разделе.

2. Реакция на события

Как было рассказано в предыдущем разделе, отслеживание (прослушивание) событий обрабатывается функцией addEventListener. После того, как событие зафиксировано, оно должно быть обработано обработчиком событий. Я не шутил, когда я упомянул ранее, что обработчик событий - это не что иное, как функция:

function normalAndBoring() {
    // Мне очень нравятся всякие разные вещи, которые могут быть внутри этой функции!
}

Единственное различие между стандартной функцией и той, которая указана в качестве обработчика события, является то, что обработчик событий специально вызывается по имени в вызове addEventListener:

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

function changeColor() {
    // Я важна!!!
}

Любой код, который вы размещаете внутри обработчика событий, будет выполняться, когда в addEventListenerfunction зафиксировано нужное вам событие. Это довольно просто!

Простой пример

Лучший способ понять то, что мы узнали только что - увидеть все это на примере полностью рабочего кода. Чтобы мы двигались параллельно, добавьте следующую разметку и код в 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>

Изначально, если вы просмотрите документ в браузере, то увидите просто пустую страницу:

Однако все изменится, если вы кликните мышью в любом месте страницы. После того как вы сделаете это, цвет фона вашей страницы изменится с белого на ярко-желтый.

Причину этого довольно легко понять. Давайте посмотрим на код:

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";
}

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

Если вы понимаете суть происходящего, то это здорово! Вы только что узнали об одном из важнейших понятий, с которым столкнетесь в программировании. Но мы еще не закончили. Мы не позволим обработчикам событий так легко соскочить с нашего крючка, так что давайте рассмотрим еще один момент.

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

Обработчик событий делает больше, чем просто вызывается, когда событие зафиксировано через функцию отслеживания событий. Он также через свои аргументы обеспечивает доступ к объекту основного события. Для простого доступа к этому объекту события мы должны изменить сигнатуру обработчика, чтобы прописать поддержку этих аргументов.

Пример:

function myEventHandler(e) {
    // элементы обработчика событий
}

На данный момент, обработчик событий - это все еще старая добрая функция. Но это то, что нам и нужно, это функция, которая принимает один аргумент ... аргумент события!

Вы можете использовать любой допустимый идентификатор для аргумента, но я, как правило, предпочитаю e, потому что так делают все крутые парни. Нет ничего технически неправильного в том, чтобы определить событие следующим образом:

function myEventHandler(isNyanCatReal) { 
    // элементы обработчика событий
}

В любом случае, аргумент события указывает на объект события, и объект передается в качестве части события. Существует причина, по которой мы обращаем внимание на такой, казалось бы, обычный и скучный момент, как возникновение события.

Этот объект события содержит свойства, которые относятся к возникшему событию. Событие, вызванное кликом мыши, будет иметь другие свойства по сравнению с событием, вызванным нажатием клавиши на клавиатуре.

Большинство событий будет иметь свое собственное специфическое поведение, а объект события является окном, через которое вы сможете наблюдать все эти уникальные особенности.

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

Это стало возможно благодаря тому, что все объекты событий получаются из базового типа Event (технически, Interface). К некоторым из распространенных свойств типа Event, которые вы будете использовать, относятся:

• i. currentTarget
• ii. target
• iii. preventDefault
• iv. stopPropagation
• v. 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, которая позволяет зарегистрировать функцию обработчика событий. Эта функция обработчика будет вызываться, когда в отслеживателе событий зафиксировано соответствующее событие.

Хотя мы бегло затронули некоторые другие, смежные темы, вы сможете лучше в них разобраться, когда мы будем рассматривать их в контексте более сложных событий.

Вадим Дворниковавтор-переводчик статьи «Events in JavaScript»