JS removeEventListener 不起作用。为什么？

Question

我有一堆 div(current_items)。每个 div 都有一个按钮——“删除 div”(remove_buttons)。 每个按钮都有一个点击监听器。单击任何按钮后，我需要删除所有按钮的所有侦听器。但是

removeEventListener

不起作用。你知道为什么吗？请告诉我。

我的JS代码是：

var current_items = document.getElementsByClassName('cart_post_wrap'),
remove_buttons = document.getElementsByClassName('cart_remove_button');

// This is a function for click listeners. 
function removeItem(object1, obeject2, object3, index)
{
    return function ()
    {
        //Some code which removes divs from DOM. 
        //And then removes all listeners:

        for (let i = 0; i < current_items.length; i++)
        {
            remove_buttons[i].removeEventListener("click", removeItem);
        }
    }
}

// Here I create my click listeners for each button. 
for (let i = 0; i < current_items.length; i++)
{
    remove_buttons[i].addEventListener("click", removeItem(current_items[i], ids_list[i], types_list[i], i));
}

Answer 1

为了

removeEventListener

工作，您需要将引用传递给您添加为事件侦听器的函数。添加事件侦听器时，您没有保存

removeItem

函数调用的返回值 - 您只是在那里传递事件侦听器，而在删除时，您正在传递对

removeItem

工厂函数的引用，它从未被添加为事件监听器，因此这不起作用。

在创建事件监听器时，您需要将它们存储在某个地方，然后将它们传递给

removeEventListener

。这样的事情应该有效：

const current_items = document.getElementsByClassName("cart_post_wrap");
const remove_buttons = document.getElementsByClassName("cart_remove_button");
const eventListeners = [];

function removeItem(object1, obeject2, object3, index) {
  return function () {
    for (let i = 0; i < current_items.length; i++) {
      remove_buttons[i].removeEventListener("click", eventListeners[i]);
    }
  };
}

for (let i = 0; i < current_items.length; i++) {
  // Save a reference to the event listener
  const listener = removeItem(current_items[i], ids_list[i], types_list[i], i);
  eventListeners.push(listener);
  remove_buttons[i].addEventListener("click", listener);
}

Answer 2

因为

remove_buttons[i].addEventListener("click", removeItem(current_items[i], ids_list[i], types_list[i], i));

没有添加

removeItem

函数作为事件监听器；它正在调用

removeItem

函数并将它返回的任何内容添加为事件侦听器；在这种情况下，带有

return function () { ... }

.

的内联函数

稍后，您尝试删除作为事件监听器的

removeItem

函数，但正如上面所解释的，它最初并没有被添加为事件监听器。

如果您无论如何都打算从 DOM 中删除元素，正如您在代码中的评论所建议的那样，删除按钮的点击事件侦听器是没有意义的：如果它们从 DOM 中消失，则无法再单击它们。忘记删除点击事件侦听器，结果代码更简洁。