Как сократить код, где много разных обработчиков событий, но одна функция-листенер?

Question

Модальное окно можна закрыть (modalClose()) 4 разными способами: нажав на крестик (modalCloseIco), нажав на кнопку с надписью "Закрыть" (modalCloseBtn), нажав на фон модального окна (modalBackground) и нажав кнопку Escape.

modalCloseIco.addEventListener('click', () => modalClose());
modalCloseBtn.addEventListener('click', () => modalClose());
modalBackground.addEventListener('click', () => modalClose());
window.addEventListener('keyup', (e) => {
    if (e.code === 'Escape') {
        modalClose();
    }
});

Видно, что существуют несколько обработчиков событий и для каждого срабатывает одна и та же функция. Мне кажется, что было бы удобнее один раз написать функцию и несколько разных обработчиков событий (в идеале в одну строчку через запятую).

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

Answer 1

Для первых трех элементов можно так, так как там реально одинаковое действие. Четвертый к ним не приставить, так как там другое действие. Но по моему так уже лучше :)

const elements = [modalCloseIco, modalCloseBtn, modalBackground]

for (const el of elements){
  el.addEventListener('click', modalClose);
}

И еще, если вам просто нужно вызывать функцию как колбек без аргументов, то можно вместо конструкции

() => modalClose()

Писать просто

modalClose

БЛОГ НА HUSL

Как сократить код, где много разных обработчиков событий, но одна функция-листенер?

Ответы (1 шт):