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函数的引用。是在原始调用中创建的-而是引用了刚刚创建的 new remove函数。以某种方式，您必须确保传入的函数与调用addEventListener的函数相同。一种可能是永久引用附加到remove的当前removeConfirm：

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，还不如尝试在数组中查找元素索引的更好选择是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);
  }


}

无法删除事件监听器Javascript

2 个答案: