无法删除事件监听器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);
  }


}