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

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

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

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

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

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

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

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