事件觸發后的removeEventListner

Question

我有一個腳本，可將click事件添加到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());  

螢火蟲說功能（e）被分配為事件，而不是enable_add，因此remove事件找不到正確的事件。 我該如何寫這三行，以便它們都能正常工作？
請沒有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));

Answer 2

編輯，更新

嘗試命名匿名函數，利用Function.prototype.call() ， Function.prototype.bind() ， arguments來傳遞this ， event對象

 var namedHandler; function enable_add(tag, type) { namedHandler = function namedHandler() { add_element.call(this, arguments[arguments.length - 1], tag, type) }.bind(this, tag, type); return namedHandler } function add_element(e, tag, type) { var el = document.createElement(tag); el.setAttribute("type", type); document.body.appendChild(el); this.removeEventListener("click", namedHandler) } var elem = document.getElementById("body_visusal_editor"); elem.addEventListener("click", enable_add.call(elem, "input", "text")) 

 <div id="body_visusal_editor">click to add one element</div> 

jsfiddle http://jsfiddle.net/oe71yfn8/

Answer 3

再次調用該函數將創建一個新函數，因此將無法使用。 為了將其傳遞給removeEventListener，您必須將EventListener存儲為變量。