javascript 在立即执行的函数中获取“事件”对象？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3769822/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get "event" object within the immediately executed function?
提问by Kalinin
I use event delegation in such way:
我以这种方式使用事件委托：
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
}
})();
how to get "event" object within the immediately executed function?
如何在立即执行的函数中获取“事件”对象？
回答by slebetman
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
}
})();
In standards compliant browsers the event object is the first parameter passed into the callback function. In IE it is a global variable (which is what e = e || window.eventis trying to determine). Therefore, the function that you return by the immediately executed functionshould accept the event object declared as its first (and usually only) argument.
在符合标准的浏览器中，事件对象是传递给回调函数的第一个参数。在 IE 中，它是一个全局变量（这e = e || window.event是试图确定的）。因此，您返回的函数immediately executed function应该接受声明为它的第一个（通常是唯一的）参数的事件对象。
Clarification
澄清
Since people are wondering (and probably they are wondering why the OP accepted this answer) there are uses for this that is not clear from the OP's question. One is to create a closure to a variable to track something:
由于人们想知道（并且可能他们想知道为什么 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 ...
}
})();
also, this is the classic way of assigning event handlers in loops:
此外，这是在循环中分配事件处理程序的经典方法：
/* 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);
}
Or maybe the OP just thought that he could 'cache' the event object and mistakenly believed he could use this to do it. In which case, reading my explanation (instead of just the code) should enlighten the reader as to why that would be a bad idea.
或者也许 OP 只是认为他可以“缓存”事件对象并错误地认为他可以使用它来做到这一点。在这种情况下，阅读我的解释（而不仅仅是代码）应该会让读者明白为什么这会是一个坏主意。
回答by Juan Mendes
I think slebetman's answer is correct according to your question. However, I don't see the point of what you are doing. If you are trying to abstract the browser's event differences, you can use something like this.
根据您的问题，我认为 slebetman 的回答是正确的。但是，我不明白你在做什么。如果你想抽象浏览器的事件差异，你可以使用这样的东西。
function createHandler( context, handler ) {
return function (e) {
e = e || window.event;
var t = e.target || e.srcElement;
handler.call (context || window, e, t);
}
}
Then you can use it like
然后你可以像这样使用它
div.onclick = createHandler(div, function(e, t){
alert ("actual clicked target is " + t.id);
alert ("handler was set on node " + this.id);
});
Note that you can pass anything as the context (the 'this' keyword in the handler)
请注意，您可以传递任何内容作为上下文（处理程序中的“this”关键字）
It's good to know this stuff, but jquery or many other libs already do this for you and it's a lot more tested than your code will ever be and it takes care of many more browser differences than this small function. But if this all you need, this does keep code bloat down.
知道这些东西很好，但是 jquery 或许多其他库已经为您完成了这项工作，并且它比您的代码进行了更多的测试，并且它比这个小函数处理了更多的浏览器差异。但是如果这就是你所需要的，这确实可以减少代码膨胀。
回答by Dagg Nabbit
elWraper.onclick = function (e) {
//how to get here "event" object
e = e || window.event;
var t = e.target || e.srcElement;
//manipulations with "t" variable
};
