• Теория
  • Теория

Кекстаграм: программируем переключатели, часть 1

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

Для этого нам нужно научиться отслеживать и обрабатывать события, которые происходят на веб-странице. Для этого в JavaScript, существует метод addEventListener:

var toaster = document.querySelector('button.toaster');
toaster.addEventListener('click', function() {
  toggleFilter(toaster.dataset.filter);
});

Подробно об этом методе рассказывается в части «Знакомство с событиями».

В этом фрагменте кода мы сделали следующее:

  1. Нашли элемент списка и у него вызвали метод addEventListener.
  2. Указали отслеживать событие click или «щелчок мыши».
  3. Для щелчков указали функцию-обработчик без названия, внутри которой вызвали функцию переключения фильтров.

Метод addEventListener был вызван у одного элемента, поэтому будут обрабатываться события только этого элемента. Первый параметр задаёт тип события, второй — функцию-обработчик.

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

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Кекстаграм: Эпилог. JavaScript» тренажёра «Практика: фотоприложение с фильтрами» можно после регистрации и оформления подписки.