javascript - 添加具有多个参数的事件侦听器并稍后将其删除

Question

这似乎是一个非常受欢迎的问题，尽管我似乎没有找到任何相关的答案。

我附加了一个事件监听，例如：

window.addEventListener('scroll', fnName, false);

问题是 fnName 需要几个参数，所以我尝试了

window.addEventListener('scroll', (function( e ){
   return fnName(e, some, param )
}()), false)

但后来window.removeEventListener不再工作了，所以我尝试了：

window.removeEventListener('scroll', (function( e ){
   return fnName(e, some, param )
}()), false)

Answer 1

每次你声明一个匿名函数时，它都会创建一个新的函数实例。如果要删除现有函数，则需要保留函数实例的副本。

var temp = function () {
    fnName(e, some, param);
};
window.addEventListener('scroll', temp, false);
//elsewhere,
window.removeEventListener('scroll', temp, false);

---

我还应该注意，使用

(function (e){
     return fnName(e, some, param)
}());

fnName立即调用undefined作为第一个参数。我怀疑那是你的意图。

Answer 2

您拥有的是一个自初始化功能：

(function() { alert("a") })(); 

您可能会注意到此代码警报"a"。

然后在您的函数中初始化fnName. 你要做的是：

window.addEventListener('scroll', function( event ) {
   fnName(event, some, param );
}, false);

当滚动事件被发出时，您然后fnName使用您的自定义参数初始化。

---

正如所指出的，如果您想再次删除处理程序，您将需要一个命名函数：

function myFn( event ) {
   fnName(event, some, param );
}

window.addEventListener('scroll', myFn, false); // Add event listener
window.removeEventListener('scroll', myFn, false); // Remove event listener

Answer 3

window.addEventListener('scroll', (function( e ){
   return fnName(e, some, param )
}), false)

只需删除()以避免定义后直接执行

Answer 4

因为我在 AMD 模块架构中，并且我试图将事件处理程序维护为私有方法，所以我想出了这个解决方案：

define(function(){

 var fnNmae = function( e ) {
   // i can now access fnName.param
 };

 return { 
   init : function() {
    fnName.param = {
      one : 1,
      two : 2
    }

   window.addEventListener('scroll', fnName, false);
   }

})