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

Question

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

не используя делегирование

Comments

[alex]

Цикл

Answer 1

[Сергей c0re]

[prewColor, redColor, blueColor].forEach(el => el.addEventListener('click', e => {
  // код обработчика
}));

Answer 2

[Ibishka]

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

Comments

[Сергей c0re]

в функцию вы передаете строковое наименование у которого нет метода addEventListener

[Somewhere Intech]

Так вешайте подготовленный коллбэк

const handler = (event) => { currColor.style.backgroundColor = `${getComputedStyle(event.target).backgroundColor}` };