Получить объект «событие» внутри сразу выполняемой функции? - PullRequest
Новая
       4

Получить объект «событие» внутри сразу выполняемой функции?

0 голосов
/ 22 сентября 2010

Я использую делегирование событий таким образом: 

elWraper.onclick = (function(){
    //how to get here "event" object
    e = e || window.event;
    var t = e.target || e.srcElement;

    //event handler
    return function(){
        //manipulations with "t" variable
    }
})();

как получить объект "событие" в сразу выполняемой функции?

Ответы [ 3 ]

10 голосов
/ 22 сентября 2010 
elWraper.onclick = (function(){
    // misc stuff here    

    //event handler
    return function(e){
        e = e || window.event;
        var t = e.target || e.srcElement;
        //manipulations with "t" variable
    }
})();

В браузерах, соответствующих стандартам, объект события является первым параметром, переданным в функцию обратного вызова.В IE это глобальная переменная (которую пытается определить e = e || window.event).Поэтому функция, которую вы возвращаете с помощью immediately executed function, должна принимать объект события, объявленный в качестве первого (и обычно единственного) аргумента.

Уточнение

Поскольку люди задаются вопросом (и, возможно, им интересно, почему ОП принял этот ответ), для этого есть способы, которые не ясны из вопроса ОП.Одним из них является создание замыкания на переменную для отслеживания чего-либо: 

/* Count number of clicks,
 * WITHOUT USING GLOBAL VARS!
 */
el.onclick = (function(){
    var counter = 0;
    return function(e){
      e = e || window.event;
      var t = e.target || e.srcElement;
      counter ++;
      alert('detected '+counter+' clicks!');
      // do stuff with t or e ...
    }
})();

Кроме того, это классический способ назначения обработчиков событий в циклах: 

/* Use double closure to break closure in loop!
 */
for (var i=0; i<stuff.length; i++) {
    var el = stuff[i];
    el.onclick = (function(x){
        return function(e){
          e = e || window.event;
          var t = e.target || e.srcElement;
          alert(x);
          // do stuff with t or e ...
        }
    })(i);
}

Или, возможно, OP простоОн думал, что может «кэшировать» объект события, и ошибочно полагал, что может использовать это для этого.В этом случае чтение моего объяснения (а не только кода) должно просветить читателя, почему это будет плохой идеей.

1 голос
/ 24 сентября 2010

Я думаю, что ответ Slebetman является правильным в соответствии с вашим вопросом. Однако я не вижу смысла в том, что вы делаете. Если вы пытаетесь абстрагировать различия событий в браузере, вы можете использовать что-то вроде этого. 

function createHandler( context, handler ) {
  return function (e) {    
    e = e || window.event;
    var t = e.target || e.srcElement;
    handler.call (context || window, e, t);
  }
}

Тогда вы можете использовать его как 

div.onclick = createHandler(div, function(e, t){
   alert ("actual clicked target is " +  t.id);
   alert ("handler was set on node " + this.id);
});

Обратите внимание, что вы можете передать что угодно в качестве контекста (ключевое слово "this" в обработчике)

Хорошо знать это, но jquery или многие другие библиотеки уже делают это для вас, и это намного больше проверено, чем ваш код, и оно заботится о гораздо большем количестве различий в браузере, чем эта маленькая функция. Но если это все, что вам нужно, код не будет раздуваться.

1 голос
/ 22 сентября 2010 
elWraper.onclick = function (e) {
  //how to get here "event" object
  e = e || window.event;
  var t = e.target || e.srcElement;
  //manipulations with "t" variable
};
...