JavaScript-обработчик событий: проблема с выполнением обработчика, который получил параметры - PullRequest
Новая
       2

JavaScript-обработчик событий: проблема с выполнением обработчика, который получил параметры

3 голосов
/ 04 февраля 2011

У меня есть эта проблема:

Я определил обработчик событий, для которого требуются параметры. 

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

Как мне это исправить?

Ответы [ 3 ]

2 голосов
/ 04 февраля 2011

Я не думаю, что вы хотите передавать аргументы там - потому что это обратный вызов, и вы никогда не знаете, какими будут эти переменные.

Можете ли вы сделать ... 

(function() {

   var p1 = 'a',
       p2 = 'b',
       obj = document.getElementById('my-object');

   var handleClick = function(event) {
      // Access to p1 and p2
      // Access to `event` object containing info about the event
   }

   obj.addEventListener('click', handleClick, false);

   // If you want to remove it
   obj.removeEventListener('click', handleClick, false);

})();

Могу я спросить, почему вы хотите поспорить? Намереваетесь ли вы также вызывать его без вызова?

2 голосов
/ 04 февраля 2011

Я думаю, вам нужно создать замыкание: 

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;
}
1 голос
/ 04 февраля 2011

Разве это не так: 

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

Передайте функцию вместо вызова.

...