@kirillleogky

Как добавить одинаковые обработчики событий на разные элементы?

Есть код:
prewColor.addEventListener('click', (event) => {
  currColor.style.backgroundColor = `${getComputedStyle(event.target).backgroundColor}`;
});

redColor.addEventListener('click', (event) => {
  currColor.style.backgroundColor = `${getComputedStyle(event.target).backgroundColor}`;
});

blueColor.addEventListener('click', (event) => {
  currColor.style.backgroundColor = `${getComputedStyle(event.target).backgroundColor}`;
});


Можно ли каким-нибудь образом повесить одинаковые обработчики на данные элементы?

Чтобы код выглядил похожим образом (чтобы не писать один и тот же код):
prewColor.
redColor.
blueColor.addEventListener('click', (event) => {
  currColor.style.backgroundColor = `${getComputedStyle(event.target).backgroundColor}`;
});

не используя делегирование
  • Вопрос задан
  • 67 просмотров
Пригласить эксперта
Ответы на вопрос 3
l3ftoverz
@l3ftoverz Куратор тега JavaScript
Люблю Финский металкор
1. Делегировать событие от документа.
2. Выбрать нужные элементы через querySelectorAll и цикл.
Ответ написан
@Ibishka
function exam(elem) {
elem.addEventListener('click', (event) => {
  currColor.style.backgroundColor = `${getComputedStyle(event.target).backgroundColor}`;
});
}
exam('prewColor');
exam('redColor');
exam('blueColor');
Ответ написан
[prewColor, redColor, blueColor].forEach(el => el.addEventListener('click', e => {
  // код обработчика
}));
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы