無法刪除事件監聽器

Question

請幫忙。

有一段代碼必須刪除 eventListener (keydown)，但它不起作用。 這是一個代碼：

export const createPostSuccessMessage = () => {
    const mainPage = document.querySelector('main');
    const successTemplate = document.querySelector('#success').content.querySelector('.success');
    const successDiv = successTemplate.cloneNode(true);

    const successClickListenerAdd = () => {
      if (mainPage.lastChild.className === 'success'){
        mainPage.removeChild(mainPage.querySelector('.success'));
      }
      document.removeEventListener('click', successClickListenerAdd)
    }

  //this one seems not to work, but I don't know why

    const successEscListenerAdd = (evt) => {
      if (evt.keyCode === 27) {
        if (mainPage.lastChild.className === 'success'){
          mainPage.removeChild(mainPage.querySelector('.success'));
        }
      }
      document.removeEventListener('keydown', successEscListenerAdd)

    }

    mainPage.appendChild(successDiv);
    document.addEventListener('click', successClickListenerAdd);
    document.addEventListener('keydown', successEscListenerAdd);
    formReset();
    resetMainMarker();
  }

export const createPostErrorMessage = () => {
    const mainPage = document.querySelector('main');
    const errorTemplate = document.querySelector('#error').content.querySelector('.error');
    const errorDiv = errorTemplate.cloneNode(true);

    const errorClickListenerAdd = () => {
      if (mainPage.lastChild.className === 'error'){
        mainPage.removeChild(mainPage.querySelector('.error'));
      }
      document.removeEventListener('click', errorClickListenerAdd)
    }

//this one seems not to work, but I don't know why

    const errorEscListenerAdd = (evt) => {
      if (evt.keyCode === 27) {
        if (mainPage.lastChild.className === 'error'){
          mainPage.removeChild(mainPage.querySelector('.error'));
        }
      }
      document.removeEventListener('keydown', errorEscListenerAdd)
    }

    mainPage.appendChild(errorDiv);
    document.addEventListener('click', errorClickListenerAdd);
    document.addEventListener('keydown', errorEscListenerAdd);


    mainPage.querySelector('.error__button').addEventListener('click', (evt) => {
      evt.preventDefault();
      if (mainPage.lastChild.className === 'error'){
        mainPage.removeChild(mainPage.querySelector('.error'));
      }
    })
}

Answer 1

在addEventListener的第三個參數中使用once選項可能更容易。 這確保事件只會被監聽一次。

document.addEventListener('click', successClickListenerAdd, { once: true });
document.addEventListener('keydown', successEscListenerAdd, { once: true });