removeEventListner after event has been triggered

Question

I have a script that adds a click event to a div to add a new element. Then the function creates and adds the element, and is then supposed to remove the click even from the Div so no farther elements can be added. I understand why the removeEventListener isn't working, but I don't know how to fix it. Here are the lines of code that are giving me the problem:

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 says that function(e) is assigned as the event, not enable_add, so the remove event does not find the right event. How do I write these three lines so they all work right?
No javascript libraries please.

Update: So i got the orignal isue sovled by rewriting it like this:

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

But now it creates a element on the add_element call for etting the handler, and one on click. How do I fix that?

Answer 1

Here's the problem:

You've got a partially applied function, that you're passing directly into addEventListener .

removeEventListener only works on the exact same function instance as what was passed to addEventListener .

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

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

func1 === func2; // false

So your solution is to cache the created function as a reference, which you then pass into addEventListener, remember it, and pass it into removeEventListener.

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

...of course, you probably don't intend to remove it, instantly. Which means that you need to get more creative.

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

Edit, Updated

Try naming anonymous function , utilizing Function.prototype.call() , Function.prototype.bind() , arguments , to pass this , event objects

 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

Calling the function again will create a new function, so that won't work. You would have to store the EventListener as a variable in order to pass it to removeEventListener.