Как правильно удалить обработчик событий?

Question

Есть два события

const formFilter = document.querySelector('.map__filters');
const resetButton = document.querySelector('.ad-form__reset');

const clearForm = () => {
  formFilter.reset();
  adForm.reset();
  resetDataMap();
};
resetButton.addEventListener('click', (evt) => {
  evt.preventDefault();
  clearForm();
});

adForm.addEventListener('submit', (evt) => {
  evt.preventDefault();
  const formData = new FormData(evt.target);

  sendData(
    showMessageSendSuccess,
    showMessageSendError,
    formData);
});

И функция активации\деактивации страницы

function changeFormState(isDisabled) {
  [adForm, formFilter].forEach((form) => {
    for (const element of form.elements) {
      element.disabled = isDisabled;
    }
  });
}

function changePageState(isDisabled) {
  adForm.classList.toggle('ad-form--disabled', isDisabled);
  formFilter.classList.toggle('ad-form--disabled', isDisabled);
  changeFormState(isDisabled);
}

Как мне правильно сделать, чтобы эти обработчики добавлялись и удалялись со страницы при активации/деактивации формы, подскажите, пожалуйста?

Answer 1

Чтобы успешно удалить обработчик, вам нужно сначала сохранить его в переменной или объявить как обычную функцию, тогда можно будет воспользоваться ссылкой на функцию при отмене:

function handleReset(evt) {
  evt.preventDefault();
  clearForm();
}

resetButton.addEventListener('click', handleReset);

// ...

resetButton.removeEventListener('click', handleReset);

БЛОГ НА HUSL

Как правильно удалить обработчик событий?

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