Чтобы узнать больше об инструментах разработчика (или Dev Tools, как их называют крутые ребята), обратитесь к следующим ресурсам:
• Обзор Chrome Dev Tools: http://bit.ly/kirupaChromeDevTools
• Обзор IE/Edge F12 Dev Tools: http://bit.ly/kirupaIEDevTools
• Обзор Firefox Dev Tools: http://bit.ly/kirupaFFDevTools
• Обзор Safari Web Inspector: http://bit.ly/kirupaSafariDevTools
ЧАСТЬ IV. Полны событиями
Глава 31. События
Многие приложения и веб-сайты, оставленные без внимания, становятся очень скучными. Запускаются они с шиком и помпой, но вся эта напыщенность очень быстро пропадает, если мы перестаем взаимодействовать с ними:
Причина проста. Приложения существуют, чтобы реагировать на наши в них действия. Хоть они и имеют определенную базовую мотивацию, проявляющуюся при запуске, которая вытаскивает их из постели и приводит в рабочее состояние, все дальнейшие их действия уже по большей части диктуются нами. Тут все и становится интересно.
Чтобы сообщить приложениям, что нужно делать, мы используем так называемые события, на которые они в итоге реагируют. В этой главе узнаем, чем являются эти события и как их можно использовать.
Поехали!
Что такое события?
На высоком уровне все создаваемое нами может быть смоделировано следующей инструкцией:
Когда___ совершится, то____
Мы можем заполнить пробелы этой инструкции великим множеством способов. Первый пробел описывает то, что происходит, а второй уже описывает реакцию на это. Вот некоторые примеры с заполненными пробелами:
Когда страница будет загружена, начнется воспроизведение видео с кошкой, скользящей на картоне.
Когда произойдет щелчок, покупка будет отправлена.
Когда ЛКМ будет освобождена, вылетит гигантская / не очень довольная птичка.
Когда клавиша удаления будет нажата, файл отправится в корзину.
Когда произойдет касание, к фотографии будет применен старый фильтр.
Когда файл будет загружен, обновится индикатор выполнения.
Эта обобщенная модель применима ко всему коду, который мы с вами написали. Она также применима ко всему коду, который написали для своих приложений наши друзья-разработчики/дизайнеры. От этой модели никуда не деться, поэтому и смысла противиться ей нет. Наоборот, следует хорошенько познакомиться с важным и очень талантливым представителем этой модели — событием.
Событие — это не более чем сигнал. Оно сообщает о том, что что-то только что произошло. Это что-то может быть щелчком мыши, нажатием клавиши клавиатуры, изменением размера окна или загрузкой документа. Главное здесь — понять, что этим сигналом могут послужить сотни встроенных в JavaScript явлений, равно как бессчетное множество отдельных пользовательских решений, созданных под конкретное приложение.
Вернемся к нашей модели, где события составляют первую ее половину:
Событие определяет то, что происходит, и передает сигнал. Вторая часть модели определяет реакцию на это событие:
При этом какая польза от сигнала, если кто-то где-то не ожидает его, чтобы предпринять соответствующее действие? Хорошо, теперь, когда у нас есть высокоуровневое представление о том, что такое событие, давайте поглядим на их жизнь в природном заповеднике JavaScript.
События и JavaScript
Учитывая важность событий, вас не должно удивлять, что JavaScript дает богатые возможности для работы с ними. Всего для их использования нам понадобится делать две вещи:
1. Прослушивать события.
2. Реагировать на события.
Оба этих шага кажутся простыми, но не стоит забывать, что мы имеем дело с JavaScript. Простота в этом случае является всего лишь завесой, скрывающей печальные последствия, которые JS обрушит на нас, сделай мы один неверный шаг. Но возможно, я драматизирую.
1. Прослушивание событий
Практически все, что мы делаем внутри приложения, заканчивается срабатыванием событий. Иногда наше приложение будет запускать события автоматически, например при своей загрузке. В других случаях оно будет запускать их в виде реакции на наши действия. Здесь стоит отметить, что наше приложение постоянно бомбардируется событиями независимо от того, хотим мы, чтобы они срабатывали, или нет. Наша же задача — указать приложению прослушивать только те события, которые нас интересуют.