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

1. Прослушивать события.

2. Реагировать на события.

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

1. Прослушивание событий

2. Реагирование на события

Как мы видели в предыдущем разделе, за прослушивание событий отвечает addEventListener. За действия, производимые после того, как событие будет услышано, отвечает обработчик событий. И я не шутил про то, что обработчик событий — это не более чем функция или объект:

function normalAndBoring() {

// я люблю походы, щенков и многие другие вещи!

}

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

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

function changeColor(event) {

// I am important!!!

}

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

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

• click

• dblclick

• mouseover

• mouseout

• mouseenter

• mouseleave

• mousedown

• mouseup

• mousemove

• contextmenu

• mousewheel и DOMMouseScroll

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

Одинарный или двойной клик

Начнем с наиболее часто используемого события мыши — клика. Это событие срабатывает, когда вы щелкаете по элементу. Иначе можно сказать, что событие click срабатывает, когда вы используете мышь для нажатия на элемент, а затем отпускаете нажатие, сохраняя курсор на этом элементе.

Ниже — абсолютно бесполезная визуализация сказанного:

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

let button = document.querySelector("#myButton");

button.addEventListener("click", doSomething, false);

function doSomething(e) {

console.log("Mouse clicked on something!");

}

Прослушивание события click аналогично практически любому другому событию, поэтому не стану утомлять вас подробностями нашей старой знакомой функции addEventListener. Вместо этого утомлю вас подробностями, связанными с событием dblclick.

dblclick срабатывает, когда вы быстро щелкаете мышью дважды. Код для использования этого события будет следующим:

let button = document.querySelector("#myButton");

button.addEventListener("dblclick", doSomething, false);

function doSomething(e) {

console.log("Mouse clicked on something…twice!");

}

Время между кликами, определяющее срабатывание события dblclick, заложено в ОС, где происходит выполнение кода. Оно не зависит от браузера и не определяется (не считывается) пользователем с помощью JavaScript.

НЕ ПЕРЕГРУЖАЙТЕ

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

Наведение и отведение курсора

Классические сценарии наведения и отведения курсора обрабатываются логично названными событиями mouseover и mouseout соответственно:

Вот фрагмент кода с применением этих событий:

let button = document.querySelector("#myButton");

button.addEventListener("mouseover", hovered, false);

button.addEventListener("mouseout", hoveredOut, false);

function hovered(e) {

console.log("Hovered!");

}

function hoveredOut(e) {

console.log("Hovered Away!");

}

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

Что насчет двух других похожих событий?

Мы рассмотрели только два события (mouseover и mouseout), которые срабатывают при наведении курсора на что-либо и его отведении. На деле же оказывается, что есть еще два события, которые делают то же самое, — mouseenter и mouseleave. Уникальность этих событий обусловливается одной важной деталью, а именно тем, что они не всплывают.

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

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

• mouseenter и mouseleave будут срабатывать только единожды. При этом не важно, через сколько потомков вы переместите курсор мыши.

В 90 % случаев вам вполне подойдут mouseover и mouseout. В остальных случаях, которые зачастую связаны с более сложными сценариями UI, вас порадует, что существуют такие события, как mouseenter и mouseleave.

События mousedown и mouseup

Два события, которые практически являются субкомпонентами события click, — это mousedown и mouseup. Следующая диаграмма поясняет почему:

Когда вы нажимаете на кнопку мыши, срабатывает событие mousedown. Когда вы отпускаете нажатие, срабатывает событие mouseup. Если нажатие и отпускание произошло на одном и том же элементе, тогда также сработает событие click.

Все это показано в следующем фрагменте кода:

let button = document.querySelector("#myButton");

button.addEventListener("mousedown", mousePressed, false);

button.addEventListener("mouseup", mouseReleased, false);

button.addEventListener("click", mouseClicked, false);

function mousePressed(e) {

console.log("Mouse is down!");

}

function mouseReleased(e) {

console.log("Mouse is up!");

}

function mouseClicked(e) {

console.log("Mouse is clicked!");

}

Справедливый вопрос: «Зачем заморачиваться этими двумя событиями?» Кажется, что событие click идеально подходит для большинства случаев, в которых может понадобиться использовать mousedown и mouseup. Вы правы, можно не замарачиваться. При этом будет полезно пояснить, что события mousedown и mouseup просто дают больше контроля, когда он нужен. Некоторые взаимодействия (вроде перетаскиваний или отпадных приемов в видеоиграх, когда вы задерживаете нажатие, чтобы зарядить смертоносный удар молнии) подразумевают совершение действий, когда сработало только событие mousedown, но не mouseup.

Событие услышано снова… и снова… и снова!

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

Далее приведен пример использования mousemove в коде:

let button = document.querySelector("#myButton");

button.addEventListener("mousemove", mouseIsMoving, false);

function mouseIsMoving(e) {

console.log("Mouse is on the run!");

}

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

Контекстное меню

Последним связанным с мышью событием, которое мы рассмотрим, является contextmenu. Как вам наверняка хорошо известно, когда вы по обыкновению кликаете правой кнопкой мыши в различных приложениях, появляется меню:

Оно называется контекстное меню. Как раз перед появлением этого меню срабатывает событие contextmenu.

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

Вот пример того, как вы можете предотвратить встроенное поведение, при котором появляется контекстное меню:

document.addEventListener("contextmenu", hideMenu, false);

function hideMenu(e) {

e. preventDefault();

}

Метод preventDefault в любом типе Event предотвращает любое его встроенное действие. Так как событие contextmenu срабатывает до появления меню, вызов preventDefault гарантирует, что оно показано не будет. Да, я уже второй раз упоминаю это свойство, но вы же знаете, что мне платят за количество символов (ха-ха).

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

Давайте перейдем к конкретике. Все события мыши, которые мы видели до сих пор, основаны на MouseEvent. Обычно эту разновидность фактоида[4] вы храните исключительно для торжественных случаев и игнорируете. Тем не менее в данном случае эта деталь для нас важна, так как MouseEvent несет в себе набор свойств, упрощающих работу с мышью. Давайте на них посмотрим.

Глобальная позиция мыши

Свойства screenX и screenY возвращают расстояние, на котором находится курсор мыши от левого верхнего угла основного монитора:

Вот очень простой пример использования screenX и screenY:

document.addEventListener("mousemove", mouseMoving, false);

function mouseMoving(e) {

console.log(e.screenX + " " + e.screenY);

}

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

Позиция курсора мыши в браузере

Свойства clientX и clientY возвращают позиции x и y курсора относительно левого верхнего угла браузера (технически его области просмотра):

Код в данном случае достаточно прост:

let button = document.querySelector("#myButton");

document.addEventListener("mousemove", mouseMoving, false);

function mouseMoving(e) {

console.log(e.clientX + " " + e.clientY);

}

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

Определение нажатой кнопки

Мыши зачастую оборудованы несколькими кнопками или предоставляют возможность их имитировать. Наиболее распространенная конфигурация состоит из левой, правой и средней (обычно это нажатие на колесико мыши) кнопок. Для определения, какая из кнопок была нажата, существует свойство button. Это свойство возвращает 0 при нажатии левой кнопки, 1 — при нажатии средней и 2 — при нажатии правой:

Код для использования этого свойства выглядит вполне ожидаемо:

document.addEventListener("mousedown", buttonPress, false);

function buttonPress(e) {

if (e.button == 0) {

console.log("Left mouse button pressed!");

} else if (e.button == 1) {

console.log("Middle mouse button pressed!");

} else if (e.button == 2) {

console.log("Right mouse button pressed!");

} else {

console.log("Things be crazy up in here!!!");

}

}

В дополнение к свойству button существует свойство buttons, а также другие, которые делают нечто похожее для помощи в определении нажатой кнопки. Я не буду много говорить об этих свойствах, просто имейте в виду, что они существуют (вы всегда можете погуглить их).

Работа с колесиком мыши

Колесико мыши отличается от всего, что мы рассмотрели до этого момента. Очевидная разница в том, что здесь мы уже имеем дело с колесиком, а не кнопкой. Менее же очевидное, но при этом более важное отличие в том, что в данном случае вы используете уже два события для работы. Первое — это mousewheel, используемое в Internet Explorer и Chrome, а второе — это DOMMouseScroll, используемое в Firefox.

Прослушивание этих событий производится обычным образом:

document.addEventListener("mousewheel", mouseWheeling, false);

document.addEventListener("DOMMouseScroll", mouseWheeling, false);

А вот после уже есть нюансы. События mousewheel и DOMMouseScroll будут срабатывать в момент прокручивания колесика в любом направлении. Но для любой практической цели будет важно, в каком направлении происходит прокрутка. Чтобы получить эту информацию, пороемся в обработчике событий и найдем аргумент события.

Аргументы события для события mousewheel содержат свойство под названием wheelDelta. В случае же с DOMMouseScroll в аргументе события присутствует свойство detail. Оба этих свойства похожи в том, что их значения изменяются на положительные или отрицательные в зависимости от направления прокрутки колесика. Здесь стоит отметить, что они не согласованы в трактовке положительного и отрицательного значения. Свойство wheelDelta, связанное с событием mousewheel, становится положительным при прокрутке вверх и отрицательным при прокрутке вниз. В точности наоборот происходит в случае со свойством DOMMouseScroll. При прокрутке вверх оно дает отрицательное значение, а при прокрутке вниз — положительное.

Из следующего примера видна обработка этой несогласованности свойств wheelDelta и detail, которая весьма проста:

function mouseWheeling(e) {

let scrollDirection;

let wheelData = e.wheelDelta;

if (wheelData) {

scrollDirection = wheelData;

} else {

scrollDirection = -1 * e.detail;

}

if (scrollDirection > 0) {

console.log("Scrolling up! " + scrollDirection);

} else {

console.log("Scrolling down! " + scrollDirection);

}

}

Переменная scrollDirection хранит значение, содержащееся в свойстве wheelData или detail. Вы можете определить особое поведение в зависимости от того, является значение положительным или отрицательным.

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

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

Дополнительные ресурсы и примеры, которые могут вас заинтересовать:

• Перемещение элемента в место клика: http://bit.ly/kirupaElementClickPosition

• Вы используете сенсорное устройство? http://bit.ly/kirupaTouchEnabled

Если у вас есть какие-либо вопросы, уделите им время и обратитесь на форум https://forum.kirupa.com.

Теперь, когда скучные основы работы с событиями клавиатуры позади, пора рассмотреть некоторые примеры, которые прояснят (а может, и запутают) все пройденное.

Проверка нажатия конкретной клавиши

Следующий пример показывает, как использовать свойство keyCode для проверки нажатия конкретной клавиши:

window.addEventListener("keydown", checkKeyPressed, false);

function checkKeyPressed(e) {

if (e.keyCode == 65) {

console.log("The 'a' key is pressed.");

}

}

Здесь я проверяю клавишу a. Внутренне эта клавиша отображается значением 65 свойства keyCode. В случае если вы так и не зазубрили их в школе, можете обратиться к подручному списку кодов для всех клавиш и знаков по следующей ссылке: http://bit.ly/kirupaKeyCode.

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

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

Если вы захотите проверить charCode и использовать событие keypress, то предыдущий пример будет выглядеть так:

window.addEventListener("keypress", checkKeyPressed, false);

function checkKeyPressed(e) {

if (e.charCode == 97) {

console.log("The 'a' key is pressed.");

}

}

charCode для клавиши a — это 97. Опять же напомню, подробности можно взять из таблицы, приведенной по ссылке выше.

Совершение действий при нажатии клавиш стрелок

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

window.addEventListener("keydown", moveSomething, false);

function moveSomething(e) {

switch (e.keyCode) {

case 37:

// нажатие влево

break;

case 38:

// нажатие вверх

break;

case 39:

// нажатие вправо

break;

case 40:

// нажатие вниз

break;

}

}

Здесь все вполне понятно. Помимо прочего, это актуальный пример использования инструкции switch, которую вы изучили еще в далекой главе 4.

Определение нажатия нескольких клавиш

А вот теперь эпичная часть! Самое интересное связано с определением нажатия нескольких клавиш и соответственного реагирования. Далее показано, как это можно сделать:

window.addEventListener("keydown", keysPressed, false);

window.addEventListener("keyup", keysReleased, false);

let keys = [];

function keysPressed(e) {

// сохраняет запись о каждой нажатой клавише

keys[e.keyCode] = true;

// Ctrl + Shift + 5

if (keys[17] && keys[16] && keys[53]) {

// делает что-нибудь

}

// Ctrl + f

if (keys[17] && keys[70]) {

// делает что-нибудь

// предотвращает встроенное поведение браузера

e. preventDefault();

}

}

function keysReleased(e) {

// отмечает отпущенные клавиши

keys[e.keyCode] = false;

}

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

Во-первых, имеется массив клавиш, хранящий каждую клавишу, которую вы нажимаете:

let keys = [];

По мере нажатия клавиш происходит вызов обработчика событий keysPressed:

function keysPressed(e) {

// хранит запись о каждой нажатой клавише

keys[e.keyCode] = true;

// Ctrl + Shift + 5

if (keys[17] && keys[16] && keys[53]) {

// делает что-нибудь

}

// Ctrl + f

if (keys[17] && keys[70]) {

// делает что-нибудь

// предотвращает встроенное поведение браузера

e. preventDefault();

}

}

Когда клавиша отпускается, происходит вызов обработчика событий keysRealesed:

function keysReleased(e) {

// помечает отпущенные клавиши

keys[e.keyCode] = false;

}

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

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

function keysPressed(e) {

// хранит запись о каждой нажатой клавише

keys[e.keyCode] = true;

// Ctrl + Shift + 5

if (keys[17] && keys[16] && keys[53]) {

// делает что-то

}

// Ctrl + f

if (keys[17] && keys[70]) {

// делает что-то

// предотвращает стандартное поведение браузера

e. preventDefault();

}

}

Важно учитывать одну деталь: некоторые комбинации клавиш приводят к реагированию браузера. Чтобы избежать выполнения браузером ненужных вам действий, используйте метод preventDefault, как это выделено, при проверке использования Ctrl + F:

function keysPressed(e) {

// хранит запись о каждой нажатой клавише

keys[e.keyCode] = true;

// Ctrl + Shift + 5

if (keys[17] && keys[16] && keys[53]) {

// делает что-то

}

// Ctrl + f

if (keys[17] && keys[70]) {

// делает что-то

// предотвращает стандартное поведение браузера

e. preventDefault();

}

}

Метод preventDefault предотвращает стандартную реакцию браузера на событие. В данном случае он не дает браузеру показать диалоговое окно поиска. Различные комбинации клавиш будут запускать различные реакции браузера, поэтому держите этот метод на вооружении, чтобы исключить их.

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

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

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

Она началась максимально скучно с объяснения принципа работы событий Keyboard и их аргументов событий. По мере продвижения все становилось интереснее: вы увидели некоторые примеры кода, где были показаны действия с клавиатурой. Если у вас есть какие-либо вопросы по этой или другой теме, не стесняйтесь обращаться с ними на форум https://forum.kirupa.com.

Начнем с самого начала. Вы щелкаете по ссылке либо нажимаете Enter после набора URL, и если сошлись звезды, загружается страница. Все кажется очень простым и занимает мало времени:

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

• событие DOMContentLoaded;

• событие load;

• атрибут async элементов сценария;

• атрибут defer элементов сценария;

• место расположения сценария в DOM.

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

Стадия первая

Первая стадия охватывает момент, когда браузер вот-вот начнет загрузку страницы.

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

Стадия вторая

Здесь уже более насыщенный процесс, во время которого происходят загрузка и обработка сырой разметки, а также DOM-страницы.

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

Стадия третья

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

На этой стадии индикаторы загрузки браузера прекращают анимацию, и именно здесь вы почти всегда оказываетесь при взаимодействии с HTML-документом. Учитывая все сказанное, иногда страница может оказаться в промежуточном состоянии, когда 99 % контента загрузилось, но какой-то случайный элемент застревает в загрузке навечно. Если вы посещали один из вирусных, или информационных, или фид-сайтов, то прекрасно поймете, о чем я.

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

В предыдущем разделе я объяснил, как расположение элементов сценария в DOM определяет время их запуска. Все это относится только к тем элементам, которые я называю простыми. Чтобы стать частью непростого мира, элементы сценария, указывающие на внешние сценарии, могут содержать атрибуты defer и async:

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

async

Атрибут async позволяет сценарию выполняться асинхронно:

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

Такая беспечность в выполнении кода довольно удивительна, но важно понимать, что сценарии, отмеченные как async, не всегда будут запускаться по порядку. Может случиться, что несколько таких сценариев будут запущены в последовательности, отличной от указанной в разметке. Точно известно лишь то, что сценарии с async начнут выполнение в некоей загадочной точке до срабатывания события load.

defer

Атрибут defer несколько отличен от async:

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

Example

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

Запустятся они в такой последовательности: inline 1, external 2, inline 2, inline 3, external 3, а затем external 1. Сценарии external 3 и external 1 помечены как defer, именно поэтому они оказываются в конце, несмотря на свое положение в разметке.

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

В последних разделах мы рассмотрели факторы, влияющие на время запуска кода. Схема ниже объединяет весь этот материал:

Теперь перейдем к актуальному для вас вопросу. Какое время будет наилучшим для выполнения вашего кода JavaScript? Важно добиться следующего:

1. Ссылки на сценарии располагайте ниже DOM, сразу над закрывающим body элементом.

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

3. Помечайте сценарии, ссылающиеся на внешние файлы, атрибутом defer.

4. Если у вас есть код, не зависящий от загрузки DOM и выполняемый как часть разветвления других сценариев в документе, его можно поместить вверх страницы, снабдив атрибутом async.

Вот и все. Думаю, что этих четырех рекомендаций хватит, чтобы в 90 % случаев обеспечить своевременный запуск кода. Для более продвинутых сценариев следует рассмотреть сторонние библиотеки вроде require.js, которые дают больший контроль над временем запуска кода. Если у вас возникнут какие-либо сложности с загрузкой, обращайтесь на https://forum.kirupa.com.

Дополнительные ресурсы и примеры:

• Загрузка модулей с помощью RequireJS: http://bit.ly/kirupaRequireJS

• Предварительная загрузка изображений: http://bit.ly/kirupaPreloadImages

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

Представьте, что есть случай, в котором вы хотите прослушивать событие клика в любом из элементов-братьев со значениями idone, two, three, four и five. Давайте дорисуем картину, изобразив DOM следующим образом:

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

Плохое решение

Так делать не нужно. Мы не хотим создавать слушателя событий для каждой из кнопок:

let oneElement = document.querySelector("#one");

let twoElement = document.querySelector("#two");

let threeElement = document.querySelector("#three");

let fourElement = document.querySelector("#four");

let fiveElement = document.querySelector("#five");

oneElement.addEventListener("click", doSomething, false);

twoElement.addEventListener("click", doSomething, false);

threeElement.addEventListener("click", doSomething, false);

fourElement.addEventListener("click", doSomething, false);

fiveElement.addEventListener("click", doSomething, false);

function doSomething(e) {

let clickedItem = e.target.id;

console.log("Hello " + clickedItem);

}

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

Хорошее решение

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

1. Создать один слушатель событий в родительском элементе theDude.

2. Когда произойдет щелчок по любому из элементов one, two, three, four или five, опереться на поведение распространения, присущее событиям, и прерывать их, когда они достигают элемента theDude.

3. (По желанию) Остановить распространение события в родительском элементе, чтобы оно не отвлекало нас своей безудержной беготней по дереву DOM вверх и вниз.

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

Последним этапом нашего квеста по распутыванию будет код, подробно расписывающий содержимое схемы и все три шага:

let theParent = document.querySelector("#theDude");

theParent.addEventListener("click", doSomething, false);

function doSomething(e) {

if (e.target!= e.currentTarget) {

let clickedItem = e.target.id;

console.log("Hello " + clickedItem);

}

e. stopPropagation();

}

Уделите время и внимательно прочитайте и проанализируйте этот код. Приняв во внимание наши изначальные цели и схему, мы будем слушать событие в родительском элементе theDude:

let theParent = document.querySelector("#theDude");

theParent.addEventListener("click", doSomething, false);

Обработкой этого события занимается один обработчик, которым является функция doSomething:

function doSomething(e) {

if (e.target!= e.currentTarget) {

let clickedItem = e.target.id;

console.log("Hello " + clickedItem);

}

e. stopPropagation();

}

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

function doSomething(e) {

if (e.target!= e.currentTarget) {

let clickedItem = e.target.id;

console.log("Hello " + clickedItem);

}

e. stopPropagation();

}

Цель события представлена e.target, а целевой элемент, к которому прикреплен слушатель событий, — e.currentTarget. Простая проверка равенства этих событий даст гарантию, что обработчик событий не среагирует на ненужные вам события, запущенные из родительского элемента.

Чтобы остановить распространение события, мы просто вызываем метод stopPropagation:

function doSomething(e) {

if (e.target!= e.currentTarget) {

let clickedItem = e.target.id;

console.log("Hello " + clickedItem);

}

e. stopPropagation();

}

Обратите внимание, что этот код располагается вне инструкции if. Я сделал так, чтобы остановить перемещение события по DOM во всех случаях, как только оно будет услышано.

Объединяя все сказанное

В результате выполнения всего этого кода вы можете щелкнуть по любому потомку theDude и прослушать событие при его распространении вверх:

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

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

Некоторое время назад я предложил решение загадки этого многоэлементного троеборья (крутые ребята говорят: MEEC), которое оказалось непродуктивным, но при этом не требовало повторения множества строк кода. До тех пор пока многие разработчики не указали мне на его непродуктивность, я считал его вполне рабочим.

В этом решении использовался цикл for для прикрепления слушателей событий ко всем потомкам родителя (или массива, содержащего HTML-элементы). Вот как выглядел его код:

let theParent = document.querySelector("#theDude");

for (let i = 0; i < theParent.children.length; i++) {

let childElement = theParent.children[i];

childElement.addEventListener('click', doSomething, false);

}

function doSomething(e) {

let clickedItem = e.target.id;

console.log("Hello " + clickedItem);

}

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

childElement.addEventListener('click', doSomething, false);

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

Если у вас возникнет ситуация, в которой элементы будут разбросаны по DOM, не имея рядом общего родителя, использование этого подхода для массива HTML-элементов будет неплохим способом решения проблемы MEEC.

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