無法刪除事件監聽器Javascript

Question

我正在嘗試在添加新事件處理程序之前刪除事件處理程序。 否則它將觸發多次。 這是被調用來附加/刪除它的方法。

function attachRemoveBookEvent(bookEl) {

    function remove() {
        bookEl.remove();

        for(let i=0; i < bookObjects.length; i++) {
            if(bookObjects[i].id == bookEl.getAttribute("data-id")) {
                bookObjects.splice(i, 1);
                break;
            }
        }

        hideContainer(removeContainer);
    }
    removeConfirm.removeEventListener("click", remove);
    removeConfirm.addEventListener("click", remove);
}

我不確定是否這樣做，因為方法實際上並不相同，當我按下按鈕時它會多次觸發。

Answer 1

每次解釋器在function關鍵字上運行時，都會創建一個新函數。 所以，如果你撥打attachRemoveBookEvent並附加一個監聽器，然后調用attachRemoveBookEvent再次，你不再有原來的參考remove這是在原來的調用創建功能-相反，您必須將新的引用remove ，這是功能剛剛創建。 以某種方式，您必須確保傳遞的函數與調用addEventListener的函數相同。 一種可能是永久引用removeConfirm附帶的當前remove ：

let remove = null;
function attachRemoveBookEvent(bookEl) {
  removeConfirm.removeEventListener("click", remove);
  remove = function remove() {
    bookEl.remove();
    for(let i=0; i < bookObjects.length; i++) {
      if(bookObjects[i].id == bookEl.getAttribute("data-id")) {
        bookObjects.splice(i, 1);
        break;
      }
    }
    hideContainer(removeContainer);
  }
  removeConfirm.addEventListener("click", remove);
}

或者，根據所需的邏輯類型，您可以使事件偵聽器永久保持打開狀態，而不必重新附加它，只需在持久性外部變量中重新分配bookEl ，有點像：

let currentBookEl = null;
function remove() {
  if (currentBookEl) currentBookEl.remove();
  for(let i=0; i < bookObjects.length; i++) {
    if(bookObjects[i].id == bookEl.getAttribute("data-id")) {
      bookObjects.splice(i, 1);
      break;
    }
  }
  hideContainer(removeContainer);
}
function attachRemoveBookEvent(bookEl) {
  currentBookEl = bookEl;
}

此外，與其手動遍歷bookObjects並break ， bookObjects嘗試在數組中findIndex元素索引的更好方法是findIndex ：

const idToFind = bookEl.getAttribute("data-id");
const index = bookObjects.find(({ id }) => id === idToFind);
bookObjects.splice(i, 1);

Answer 2

您可以將一個類添加到元素，並且僅在該類不存在時添加偵聽器

function attachRemoveBookEvent(bookEl) {

  function remove() {
    bookEl.remove();

    for (let i = 0; i < bookObjects.length; i++) {
      if (bookObjects[i].id == bookEl.getAttribute("data-id")) {
        bookObjects.splice(i, 1);
        break;
      }
    }

    hideContainer(removeContainer);
  }

  if(!removeConfirm.classList.contains('someClass')) {
    removeConfirm.classList.add('someClass')
    removeConfirm.addEventListener("click", remove);
  }


}