javascript 将多个参数与事件对象一起传递给事件处理程序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8941183/
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
Pass multiple arguments along with an event object to an event handler
提问by Asur
How can one pass multiple arguments along with an event object to an event handler without using Function.prototype.bind?
如何在不使用的情况下将多个参数与事件对象一起传递给事件处理程序Function.prototype.bind？
The event handler has a closure in it.
事件处理程序中有一个闭包。
The below basic code won't work,
下面的基本代码不起作用，
element.addEventListener("click", eventHandler(eventObj + arguments), false);
element.addEventListener("click", eventHandler(eventObj + arguments), false);
function eventHandler(eventObj + arguments) {
return function(){}; //a closure
}
I don't know how to pass event object and other arguments at the same time to an event handler.
我不知道如何同时将事件对象和其他参数传递给事件处理程序。
Updated:
更新：
I have even tried using anonymous function inside addEventListener. Doing so, it seems that the control never reached to the closure inside the callback function.
我什至尝试在 addEventListener 中使用匿名函数。这样做，似乎控件从未到达回调函数内的闭包。
element.addEventListener("click", function(e){
var data = {'event':e, 'args':arguments};
eventHandler(data);
}, false);
function eventHandler(data) {
return function(){ //this function is never executed
console.log(JSON.stringify(data));
};
}
回答by JMM
So if I understand correctly, you want to add an event listener to the element, and configure some additional data that exists at the time you're adding the listener to be passed to the listener when it's called. If that's what you want to do, you just need a proper closure. Something like this, assuming you want to store the additional data in an object:
因此，如果我理解正确的话，您希望向元素添加一个事件侦听器，并配置一些在添加侦听器时存在的附加数据，以便在调用时将其传递给侦听器。如果这就是你想要做的，你只需要一个适当的关闭。像这样，假设您想将附加数据存储在一个对象中：
var extra_data = {one: "One", two: "Two"};
var make_handler = function (extra_data) {
return function (event) {
// event and extra_data will be available here
};
};
element.addEventListener("click", make_handler(extra_data));
回答by Eugen Rieck
I suspect you can't, but there is a trick:
我怀疑你不能，但有一个技巧：
element.clickArguments=new Object();
element.clickArguments.argument1=...;
element.clickArguments.argument2=...;
Now in your event handler reference the event emitting object.
现在在您的事件处理程序中引用事件发射对象。
回答by Esailija
helper function:
辅助功能：
function curryRight( original ) {
var args = [].slice.call( arguments, 1 );
return function() {
return original.apply( this, [].slice.call( arguments ).concat( args ) );
};
}
Usage:
用法：
element.addEventListener("click", curryRight( eventHandler, 1, 2, 3 ), false );
Example:
例子：
function eventHandler( event, a, b, c ) {
console.log( event, a, b, c );
//Logs MouseEvent, 1, 2, 3
}
document.addEventListener("click", curryRight( eventHandler, 1, 2, 3 ), false );
回答by codekandis
I know this thread is old, but it's a common mistake I see here.
我知道这个线程很旧，但这是我在这里看到的一个常见错误。
I have even tried using anonymous function inside addEventListener. Doing so, it seems that the control never reached to the closure inside the callback function.
--
@asur
我什至尝试在 addEventListener 中使用匿名函数。这样做，似乎控件从未到达回调函数内的闭包。
--
@asur
You need to invoke the returned closure from eventHandler().
您需要从 调用返回的闭包eventHandler()。
element.addEventListener("click", function(e){
var data = {'event':e, 'args':arguments};
eventHandler(data)(); // invoking the closure here
}, false);
If you won't you just get a closure returned to the binary nirvana.
如果你不这样做，你只会得到一个返回到二进制必杀技的闭包。
Besides that it's preferred to @jmm's solution while it's much more clean.
除此之外，它比@jmm 的解决方案更受欢迎，同时它更干净。
