Question

我以这种方式使用事件委托：

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

如何在立即执行的函数中获取“event”对象？

Answer 1

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返回的函数应该接受声明为其第一个（通常是唯一的）参数的事件对象。

<强>澄清

由于人们想知道（并且他们可能想知道为什么OP接受了这个答案），因此OP的问题并不清楚这一点。一种是创建一个变量的闭包来跟踪某些东西：

/* 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只是认为他可以“缓存”事件对象而错误地认为他可以用它来做这件事。在这种情况下，阅读我的解释（而不仅仅是代码）应该让读者了解为什么这是一个坏主意。

Answer 2

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

Answer 3

根据你的问题，我认为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或许多其他的lib已经为你做了这个，并且它比你的代码所测试的要多得多，并且它比这个小函数更需要浏览器差异。但如果这就是你所需要的，这确实会让代码膨胀。

在立即执行的函数中获取“event”对象？

3 个答案: