не понимаю как реализовать установку слушателей оверлея в тело модуля чтобы установить один раз на каждый попап

const popupProfile = document.querySelector('.popup-profile');
const popupAdd = document.querySelector('.popup-add');
const popupImage = document.querySelector('.popup-image'); 

const buttonEdit = document.querySelector('.profile__edit-button');
const addButton = document.querySelector('.profile__add-button');
const formCards = document.querySelector('.form-cards'); 
const formProfile = document.querySelector('.form-profile');

const nameProfileInput = document.querySelector('.form__input_text_name');
const jobProfileInput = document.querySelector('.form__input_text_job');
const nameProfileTitle = document.querySelector('.profile__name');
const jobProfileTitle = document.querySelector('.profile__job'); 

const nameImageAdd = document.querySelector('.form__input_image_name');
const linkImageAdd = document.querySelector('.form__input_image_link');

const imageClicked = document.querySelector('.popup-image__img');
const nameImageClicked = document.querySelector('.popup-image__title');
const cardsBlock = document.querySelector('.cards');
const closeButtons = document.querySelectorAll('.popup__close');
closeButtons.forEach((button) => {
  const popup = button.closest('.popup');
  button.addEventListener('click', () => closePopup(popup));
});

const closeWithinPopup = (e) => {
  const isOverlay = e.target.classList.contains('popup_opened');
  if (isOverlay) {
    closePopup(e.target);
    }
};

const closePopupEsc = (e) => {
  const isEsc = (e.key === 'Escape');
  if (isEsc) {
    const popup = document.querySelector('.popup_opened');
    closePopup(popup);
  }
};

const openPopup = (popup) => {
  popup.classList.add('popup_opened');
  popup.addEventListener('click', closeWithinPopup);
  document.addEventListener('keydown', closePopupEsc);// тут его не должно быть 
};
const closePopup = (popup) => {
  popup.classList.remove('popup_opened');
  popup.removeEventListener('click', closeWithinPopup);
  document.removeEventListener('keydown', closePopupEsc);
};

function viewPopupImageImg(name, link) {
  imageClicked.src = link;
  imageClicked.alt = name;
  nameImageClicked.textContent = name;

  openPopup(popupImage);
}

function createCard(data) {
  const card = new Card(data, '#card__template', viewPopupImageImg);
  return card.generateCard();
}

function addNewCard(input) {
  cardsBlock.prepend(input);
}
initialCards.forEach((input) => {
  addNewCard(createCard(input));
});

function clearInput(e) {
  e.target.reset();
}

function handleFormProfileSubmit(e) {
  e.preventDefault();

  nameProfileTitle.textContent = nameProfileInput.value;
  jobProfileTitle.textContent = jobProfileInput.value;

  closePopup(popupProfile);
}

function handleFormAddSubmit(e) {
  e.preventDefault();

  const addCard = {
    name: nameImageAdd.value,
    link: linkImageAdd.value,
  };

  addNewCard(createCard(addCard));


  closePopup(popupAdd, clearInput(e));
}

buttonEdit.addEventListener('click', function () {
  nameProfileInput.value = nameProfileTitle.textContent;
  jobProfileInput.value = jobProfileTitle.textContent;
  
  openPopup(popupProfile);
});

addButton.addEventListener('click', function () {
  formCardValidation.disablesSubmitForm();
  openPopup(popupAdd);
});

formProfile.addEventListener('submit', handleFormProfileSubmit);
formCards.addEventListener('submit', handleFormAddSubmit);
openPopup.addEventListener('keydown', closePopupEsc);

//валидация
const profileValidation = new FormValidator(obj, formProfile);
profileValidation.enableValidation();

const formCardValidation = new FormValidator(obj, formCards);
formCardValidation.enableValidation();

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