js：函数（）{}的removeEventListener [重复]答案

【问题标题】：js: removeEventListener for function(){} [duplicate]js：函数（）{}的removeEventListener [重复]
【发布时间】：2013-01-31 19:03:43
【问题描述】：

通过 addEventListener 和 removeEventListener 使用诸如 function foo(){} 之类的命名函数似乎很容易。

但是，我还有另一种情况，使用无名函数可能很有用，例如

addEventListener(

   "thervent",

   function(){

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

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

   }

);

【问题讨论】：

标签： javascript events

【解决方案1】：

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

var handler;

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

addEventListener("theEvent", handler);

如果你愿意，你可以完全内联，但是如果你不理解闭包¹，这个表达会有点混乱。这种方法的优点是处理程序的名称不会污染您添加事件侦听器的函数的范围。

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

    return handler;
}()));

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

【讨论】：

那个，或者使用命名函数表达式。
你也可以这样做；两个定义都会被提升，所以你选择哪个是风格问题。
你的意思是两个都不会被提升，对吧？ :)
@cdhowie 声明：是的。作业：没有。
是的——但我想说“定义”是一个模棱两可的术语；最好使用“声明”和“分配/初始化”来消除歧义。

【解决方案2】：

你不能删除匿名函数，你需要一个处理程序来这样做：

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

   },
   false
);

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

【讨论】：

【解决方案3】：

除了浏览器兼容性问题，^1,2没有什么可以阻止您访问naming that function expression：

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

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

   }
);

【讨论】：

【解决方案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);
});

【讨论】：