События на практике — JS: DOM API

В этом уроке мы рассмотрим решение типичной фронтенд-задачи, пользуясь полученными ранее знаниями.

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

https://codepen.io/hexlet/pen/bGEMXPY

Принцип работы здесь следующий:

• Пользователь кликает на ссылку
• К ней добавляется класс active
• Благодаря этому выделяется новый пункт меню

С предыдущим выбранным пунктом происходит ровно наоборот — там у ссылки удаляется класс active.

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

Этот обработчик будет активировать текущий элемент и деактивировать предыдущий:

// Извлекаем все ссылки
const links = document.querySelectorAll('a')
// На каждую кнопку вешаем событие
// Для этого обходим все ссылки и на каждую вешаем обработчик
links.forEach((link) => {
  link.addEventListener('click', () => {
    // Деактивируем предыдущий выбранный элемент
    // алгоритм деактивации разберем ниже

    // Выделяем текущий
    link.classList.add('active')
  })
})

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

Например, можно запоминать выделенный элемент и снимать с него нужный класс в момент клика по новому элементу. Этот способ требует введения состояния — какой-то переменной, которая хранит текущий выделенный элемент. Дополнительную сложность добавляет первая загрузка. Так происходит, потому что обычно выделенный элемент приходит уже в готовом HTML — то есть у JavaScript нет информации о том, кто активен. В целом, этот способ довольно затратен в реализации.

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

links.forEach((link) => {
  link.addEventListener('click', () => {
    // Удаляем активный класс со всех ссылок
    links.forEach(link => link.classList.remove('active'))
    link.classList.add('active')
  })
})

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

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

Лучше использовать специальный указатель, который показывает, что меню должно управляться с помощью JavaScript. Хорошей практикой считается использовать для этого атрибуты data-*.

Другими словами, добавление JavaScript-логики работает только для тех меню, у которых есть нужный атрибут:

<ul class="nav">
  <li>
    <a class="active" data-toggle="tab" href="#home">Home</a>
  </li>
  <li>
    <a data-toggle="tab" href="#profile">Profile</a>
  </li>
  <li>
    <a data-toggle="tab" href="#contact">Contact</a>
  </li>
</ul>

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

const links = document.querySelectorAll('[data-toggle="tab"]')

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

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

// links относится вообще ко всем ссылкам всех меню на странице
links.forEach(link => link.classList.remove('active'))

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

1. Найти корневой элемент того меню, по элементу которого произошел клик
2. Затем найти активную ссылку внутри текущего меню и убрать с нее активность

links.forEach((link) => {
  link.addEventListener('click', () => {
    // closest находит ближайшего родителя среди подходящих по указанному селектору
    // Наше меню имеет класс .nav
    const nav = link.closest('.nav')
    // Находим активный элемент внутри меню
    const activeElement = nav.querySelector('.active')
    activeElement.classList.remove('active')
    link.classList.add('active')
  })
})

Дополнительные материалы

1. Урок "Селекторы"