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()); 

Пожар ошибка говорит, что функция (е) назначается как событие, не enable_add, поэтому событие удалить не найти нужное событие. Как написать эти три строки, чтобы все они работали правильно?
Никаких библиотек javascript, пожалуйста.

Update: Так что я получил Orignal isue sovled переписав его так:

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

Редактировать, Обновлено

Попробуйте назвать безымянную функцию, используя 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 2

Вызов функции снова создаст новую функцию, так что это не сработает. Вам нужно будет сохранить EventListener как переменную, чтобы передать ее removeEventListener.

Answer 3

Вот проблема:

У вас есть частично применяются функции, которые вы передаете непосредственно в 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));