event-object

Домашнее задание к лекции «Объект события»

Выполните задания:

1. Выпадающие списки.
2. Соло на клавиатуре.
3. Вкладки.

Чтобы получить зачёт, выполните все три задачи. Пришлите на проверку все три задачи сразу, не частями.

Работы должны соответствовать принятому стилю оформления кода.

Любые вопросы по задачам задавайте в чате учебной группы.

Бонус

Фазы и делегирование событий

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

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

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

1. Введение в события.
2. AddEventListener.
3. Всплытие и перехват.
4. Делегирование событий.
5. Event.currentTarget.
6. Event.target.

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

Работа с API и обработчиками

Для закрепления навыков работы с событиями и внешними интрефейсами попробуйте пройти JavaScript-игру «Elevator Saga»: https://play.elevatorsaga.com.

Собственные события

Как можно создать собственное событие и его вызвать? Например:

element.addEventListener( 'hello' );

Эту тему мы подробно разберём в следующем курсе, но пока можно познакомиться со статьями:

1. Создание собственных событий.
2. CustomEvent.
3. Генерация событий на элементах.

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