js：removeEventListener for function（）{}

Question

使用像函数foo（）{}这样的命名函数似乎很容易使用addEventListener和removeEventListener。

但是，我还有另外一种情况，那就是使用无名函数，例如

  

的addEventListener（

   "thervent",

   function(){

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

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

   }

     

）;

Answer 1

您需要将该函数存储在变量中，以便在删除它时可以引用它。

var handler;

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

addEventListener("theEvent", handler);

如果你愿意的话，你可以纯粹内联这样做，但是如果你不理解闭包 ¹ ，这个表达式有点令人困惑。这种方法的优点是处理程序的名称不会污染添加事件侦听器的函数的范围。

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

    return handler;
}()));

---

¹ 当然，如果您不理解闭包，那么您应该在编写另一行JavaScript之前立即了解它们，因为这是该语言中最有用和最强大的功能之一

Answer 2

除了浏览器兼容性问题， ^1,2 没有什么可以阻止你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

Answer 3

您无法删除匿名函数，您需要一个处理程序来执行此操作：

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

   },
   false
);

请注意myhandler仅针对函数的主体定义，因此您不会在外面与其他函数的名称发生冲突。

Answer 4

使用arguments.callee。像这样的东西会起作用：

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

或者如果您使用严格模式（在我看来毫无意义，但以防万一......）请使用：

addEventListener("theEvent",function handler() {
    // some code here
    removeEventListener("theEvent",handler);
});