1. Назначаем обработчик события.
В строчке 25 обращаемся к tabsParent, в котором у нас хранится блок-обертка со всеми табами. Назначаем tabsParent слушатель события addEventListener(), который принимает в себя два аргумента.
Первый аргумент - название события которое прослушивается.
Второй аргумент функция, которая начнет выполнятся когда произойдет указанное событие.
Дословно: при событии клика на данном элементе выполнить функцию.
элемент.addEventListener('какое событие отслеживаем', функция)
Функция содержит один аргумент event - объект события.Объявляем его, так как ниже в коде будем к нему обращаться. Объект события содержит в себе информацию о самом событии, множество параметров, но в данном коде мы будем работать с одним из них.
В строчке 24 мы обращаемся к свойству target у объекта события event.
В записи будет
event.target
будет лежать элемент на котором произошло событие, на который мы кликнули. Этот элемент мы присваиваем в переменную target:
const target = event.target
Мы присвоили event.target в переменную, чтобы в коде ниже каждый раз не повторять эту конструкцию.
2. Разбираем условия в теле функции.
В 25 строчке в условии запись
target && target.classList.contains('tabheader__item')
должна вернуть true чтобы выполнился код в {}.
Запись
target.classList.contains('tabheader__item')
значит, что мы обращаемся к свойству classList элемента target(элемент на котором сработало событие event.target = target). В classList лежит псевдомассив всех классов(селекторов) элемента. И мы вызываем метод contains(), который проверяет, есть ли у данного элемента селектор, указанный в аргументе contains('tabheader__item').
Запись
if(target && target.classList.contains('tabheader__item')){какой-то код}
равна
если ( есть элемент на который мы кликнули && данный элемент содержит класс который есть только непосредственно у самих табов ){выполнить какой-то код}
равна
если(true && true) {выполнить какой-то код}
Такое условие поможет точно удостовериться в том, что мы кликнули именно на сам таб и только потом выполнять код.
Если мы кликнули на таб, условие проверит, что это именно таб. В теле условия в 26 строчке мы обращаемся к псевдомассиву tabs и перебираем его циклом forEach(). Функция внутри forEach() принимает два аргумента:
- item - сам элемент,
- i - порядковый номер элемента(нумерация в js начинается с нуля, первый элемент в массиве имеет номер 0)
Теперь пишем еще одно условие в строчке 27.
if(target == item)
равно
если ( элемент по которому мы кликнули равен перебранному элементу из псевдомассива) { выполнить какой-то код }
Сравнение target == item должно вернуть true и тогда пойдет выполнение кода в {}.
Теперь в теле условия, в 28 и 29 строчках, мы вызываем две функции
и в функцию showTabContent(i) мы предаем i -номер перебранного массива.
3. Работа слушателя события
1. Добавили слушатель события на блок-обертку.
2. Элемент на котором произошло событие клика записываем в переменную.
3. Проверяем элемент условием: содержит ли он класс который есть только у табов.
4. Если условие выполнено, перебираем псевдомассив с табами.
5. Проверяем еще одно условие: если элемент, на котором произошло событие клика, является табом из перебранного псевдомассива.
6. Если условие выполнено, то сначала очищаем все на экране вызовом функции hideTabContent(), а потом вызываем функцию showTabContent(i) и передаем в нее номер элемента, который прошел условие в 27 строчке.