@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}`;
});

не используя делегирование
  • Вопрос задан
  • 69 просмотров
Решения вопроса 1
l3ftoverz
@l3ftoverz Куратор тега JavaScript
Люблю Финский металкор и ищу работу.
1. Делегировать событие от документа.
2. Выбрать нужные элементы через querySelectorAll и цикл.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@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 => {
  // код обработчика
}));
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Admitad Projects Москва
от 130 000 до 200 000 ₽
Fundraise Up Санкт-Петербург
от 2 500 до 3 500 $
от 5 000 до 6 500 $
28 мая 2020, в 14:12
25000 руб./за проект
28 мая 2020, в 13:55
3000 руб./за проект
28 мая 2020, в 13:51
20000 руб./за проект