0

Using named functions like function foo(){} seems to be easy-go with addEventListener and removeEventListener.

However, I have another case, where it might be useful to go with nameless functions, e.g.

addEventListener(

   "thervent",

   function(){

           /*whatever i want to do before removing the eventlistener afterwards.*/ 

           ...removeEvenetListener("...",???,...);

   }

);

Community
  • 1
  • 1
ledy
  • 1,527
  • 6
  • 22
  • 33

4 Answers4

3

You would need to store the function in a variable so that you can reference it when removing it.

var handler;

handler = function () {
    /* ... */
    removeEventListener("theEvent", handler);
};

addEventListener("theEvent", handler);

You can do this purely inline if you want, but the expression of this is a bit confusing if you don't understand closures1. The advantage of this approach is that the name of the handler does not pollute the scope of the function in which you add the event listener.

addEventListener("theEvent", (function () {
    function handler () {
        /* ... */
        removeEventListener("theEvent", handler);
    };

    return handler;
}()));

1Of course, if you don't understand closures then you should immediately go learn about them before writing another line of JavaScript, since this is one of the most useful and powerful features in the language.

cdhowie
  • 158,093
  • 24
  • 286
  • 300
  • 1
    That, or use a named function expression maybe. – Frédéric Hamidi Feb 15 '13 at 18:20
  • You could do that as well; both definitions will be hoisted, so which you choose is a matter of style. – cdhowie Feb 15 '13 at 18:22
  • You mean both *won't* be hoisted, right? :) – Frédéric Hamidi Feb 15 '13 at 18:23
  • Both will. The variable and function definitions will both be hoisted to the top of the function in which they are declared. – cdhowie Feb 15 '13 at 18:24
  • 1
    @cdhowie declarations: yes. Assignment: no. – Matt Ball Feb 15 '13 at 18:24
  • @MattBall Yup. It's a good thing I never said that assignments are hoisted then, no? – cdhowie Feb 15 '13 at 18:26
  • 1
    Yes - but I'd say "definition" is an ambiguous term; better to use "declaration" and "assigment/initialization" for disambiguation. – Matt Ball Feb 15 '13 at 18:27
  • With a named function expression, the name is not hoisted. It's a local variable inside the new function. So you don't need your closure at all *(unless you care about some old IE bugs)*. – the system Feb 15 '13 at 18:29
  • I consider definition and declaration to mean the same thing in JavaScript -- defining the symbol is declaration, in my mind. I can see how this might be confusing though. – cdhowie Feb 15 '13 at 18:29
  • @cdhowie, in your first example the variable is indeed hoisted, but not the function definition (it only exist from the point of assignment onwards). A named function expression would not need to be stored in a variable, that's why I was confused by your first comment. – Frédéric Hamidi Feb 15 '13 at 18:29
  • @FrédéricHamidi Understood. I tend to avoid named function expressions though, since there are some support issues in older browsers. The workaround is so simple that I see no reason not to use it. – cdhowie Feb 15 '13 at 18:30
3

Browser compatibility issues aside,1,2 there's nothing stopping you from naming that function expression:

addEventListener(
   "thervent",
   function foobar(){
        /*whatever i want to do before removing the eventlistener afterwards.*/ 

        removeEventListener("thervent", foobar ,...);

   }
);

  1. http://kangax.github.com/nfe/#jscript-bugs
  2. http://kangax.github.com/nfe/#safari-bug
Matt Ball
  • 354,903
  • 100
  • 647
  • 710
0

You can't remove an anonymous function, you need an handler to do so:

el.addEventListener(
    "theevent",
   function myhandler(e){
       /*whatever i want to do before removing the eventlistener afterwards.*/ 
       this.removeEvenetListener(e.type, myhandler, false);

   },
   false
);

Notice that myhandler is defined only for the function's body, so you're not clashing with other function's name outside.

ZER0
  • 24,846
  • 5
  • 51
  • 54
-1

Use arguments.callee. Something like this would work:

addEventListener("theEvent",function() {
    var callee = arguments.callee;
    // some code here
    removeEventListener("theEvent",callee);
});

Or if you use Strict Mode (pointless in my opinion, but just in case...) use this:

addEventListener("theEvent",function handler() {
    // some code here
    removeEventListener("theEvent",handler);
});
Niet the Dark Absol
  • 320,036
  • 81
  • 464
  • 592