javascript - js: removeEventListener for function(){}

Question

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

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

添加事件监听器（

   "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没有什么能阻止您命名该函数表达式：

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