Как это сделать на ЧИСТОМ js?

Question

[Kryptonit]

Мне нужно навесить обработчик события клика на каждый li из меню ul:
(не тупо на каждый отдельный элемент)

<ul class = "list">
                    <li class="li active">главная</li>
                    <li class="li">навыки</li>
                    <li class="li">опыт</li>
                    <li class="li">портфолио</li>
                    <li class="li">контакты</li>
                </ul>

На форумах ответы есть, но их, на мой взгляд, мало и зачастую нет объяснения.
Впоследствии этот html будет использован для создания якорных ссылок на js.(На html меня не устраивает по ряду причин).
Прошу прикрепить код с понятным объяснением

Comments

[Модератор]

Kryptonit дорогой пользователь, настоятельно рекомендуем еще раз обратить самое пристальное внимание на п. 3.1 регламента работы сервиса (и, в особенности, на его последний абзац). В противном случае, ваши вопросы будут удаляться по причине тег-спама, а систематические нарушения приведут к блокировке учетной записи.

Answer 1

[Vearodev]

Пример через делегирование


Либо через цикл, на каждый отдельный элемент

Comments

[Kryptonit]

Почему != li, если по-логике должно быть ==

[Vearodev]

Kryptonit, можно и так, но тогда логику нужно будет писать внутри if, я предпочитаю такой подход, мне так больше нравится, меньше вложенности кода, особенно в таком маленьком примере

Я как бы отслеживаю по какому элементу произошел клик внутри родителя, и если это не LI, то просто ничего не делаю, иначе выполняю какую то логику. Т.е код который ниже IF не выполнится, если мы кликнули не по LI

[Максим]

Vearodev, а без alert можете показать как сделать активный пункт меню ?

[Vearodev]

Максим Ленский, да, до дома доеду напишу)

[Vearodev]

Максим Ленский, Вам еще нужно? или уже не актуально? Скорее всего не акутально, потому что ответом ниже как-раз то, что вам нужно

Answer 2

[Стас Хитрич]

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

Comments

[Максим]

а почему тогда в вашем случае можно активными сделать все li ?

[Стас Хитрич]

Не понял суть вопроса. Я просто написал как повесить слушатель события на список и определять на какой элемент нажали, собственно что и было необходимо.

[Максим]

Стас Хитрич, ну не может же быть - что бы все пункты меню были активные ?

[Стас Хитрич]

Максим Ленский, я их делаю не активными, а просто меняю цвет элемента li по которому нажал пользователь. В коде это видно. Это лишь демонстрация работы, не более. Вместо смены цвета можно проверять якорь ссылки внутри элемента списка или ещё что-то, я же написал комментарий, что можете делать что угодно

[Максим]

Стас Хитрич, я не про это - код ваш работает - я про логику - нажал на пункт меню и всего ОДИН пункт может стать активным - в вашем случае ВСЕ

[Стас Хитрич]

Максим Ленский, можно добавить, например, что-то такое:

if (targetEl.tagName === "LI") {
   ul.querySelectorAll('li').forEach(function(item) {
      item.classList.remove('active');
    });
    targetEl.classList.add('active');
}

Я отвечал изначально на первый вопрос, так что про классы и речи не было. В делегировании для такой задачи просто снимаете класс со всех элементов и назначаете его элементу по которому нажали.

[Максим]

Стас Хитрич, я же снимок экрана показал - ни чего не снимается - тыкнул активный клас появился - тыкнул на другую ссылку - опять присвоился но прошлый не удалился

[Стас Хитрич]

Максим Ленский, я же сказал Вам, что это не класс добавляется, а цвет элемента меняется по которому нажали. Просто демонстрация. Я отвечал на вопрос автора поста, а не на ваши дополнительные.

[Максим]

Стас Хитрич, точно - сорри