javascript - 事件触发后removeEventListener

Question

我有一个脚本，可以向 div 添加单击事件以添加新元素。然后该函数创建并添加元素，然后甚至应该从 Div 中删除单击，以便无法添加更多元素。我明白为什么removeEventListener 不起作用，但我不知道如何修复它。以下是给我带来问题的代码行:

function enable_add(tag, type){return function(e){add_element(e, tag, type);};} //Function call for adding new elements  
document.getElementById("body_visual_editor").addEventListener("click", enable_add(tag, type));  
document.getElementById("body_visual_editor").removeEventListener("click", enable_add());  

Fire bug 表示 function(e) 被指定为事件，而不是enable_add，因此删除事件找不到正确的事件。我该如何编写这三行以便它们都能正常工作？
请不要使用 JavaScript 库。

更新:所以我通过像这样重写来解决了原始问题:

var handler;
function enable_add(tag, type) //Function call for adding new elements
{
    handler= function handler(e){add_element(e, tag, type);};
    return handler
}
document.getElementById("body_visual_editor").addEventListener("click", enable_add(tag, type));  
document.getElementById("body_visual_editor").removeEventListener("click", handler);   

但现在它在 add_element 调用上创建一个元素以设置处理程序，并在单击时创建一个元素。我该如何解决这个问题？

Answer 1

问题是这样的:

您已经获得了一个部分应用的函数，您将其直接传递到 addEventListener 中。

removeEventListener 仅适用于与传递给 addEventListener 的函数实例完全相同的函数实例。

function makeFunction () {
  return function () { };
}

var func1 = makeFunction();
var func2 = makeFunction();

func1 === func2; // false

因此，您的解决方案是将创建的函数缓存为引用，然后将其传递给 addEventListener，记住它，然后将其传递给removeEventListener。

var myHandler = makeFunction();
el.addEventListener("click", myHandler);
el.removeEventListener("click", myHandler);

...当然，您可能不打算立即删除它。 这意味着您需要发挥更多创意。

function handleEventOnce (evt, el, action) {
  function doSomething (e) {
    action(e);
    el.removeEventListener(evt, doSomething);
  }
  el.addEventListener(evt, doSomething);
}

handleEventOnce("click", button, somePartialFunction(a, b));