JavaScript 事件处理程序 : problem with execution of handler that got parameters

Question

我有这个问题:

我已经定义了一个需要参数的事件处理程序。

var handler = function(p1, p2){
    //some code
}

然后我将事件处理程序添加到函数内的对象。

function foo(p1, p2){
    //Some code
    obj.addEventListener('click', handler(p1, p2), false)
}

如您所知，上面的代码是不正确的。它不会听取事件。相反，它会立即执行该功能。现在要解决这个问题，我只需删除 handler(p1, p2) 并插入 function(){ handler(p1, p2) } 即可。但问题是我有另一个函数想要删除事件监听器，这对于后一种解决方案是不可能的。

function koo(){
    //Some code
    obj.removeEventListener('click', handler, false)
}

我该如何解决这个问题？

Answer 1

我想你需要创建一个闭包:

var createHandler = function(p1, p2){
    return function (event) {
        //some code that uses p1 and p2
    };
};

var handler;

...现在您可以像这样分配处理程序，同时仍然可以访问 p1 和 p2:

function foo(p1, p2){
    handler = createHandler(p1, p2);
    //Some code
    obj.addEventListener('click', handler, false);
}

function koo(){
    //Some code
    obj.removeEventListener('click', handler, false);
    handler = null;
}

请注意，handler 现在是一个全局变量。

---

更新:我刚刚意识到，在您的情况下，这可以通过合并 createHandler 和 foo 来简化，如下所示:

var handler; // we need this to be accessible both to foo and koo

function foo(p1, p2){
    handler = function(event) {
        // some code that uses p1 and p2
    };
    //Some code
    obj.addEventListener('click', handler, false);
}

function koo(){
    //Some code
    obj.removeEventListener('click', handler, false);
    handler = null;
}