JS removeEventListener 不起作用。为什么？

Question

我有一堆div (current_items)。每个div都有一个按钮- removediv"(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中消失，则无法再单击它们。忘记删除单击事件侦听器，结果是代码更干净。