将多个 arguments 与事件 object 一起传递给事件处理程序

Question

如何在不使用Function.prototype.bind的情况下将多个 arguments 与事件 object 一起传递给事件处理程序？

事件处理程序中有一个闭包。

下面的基本代码不起作用，

element.addEventListener("click", eventHandler(eventObj + arguments), false);

function eventHandler(eventObj + arguments) {
  return function(){}; //a closure
}

我不知道如何将事件 object 和其他 arguments 同时传递给事件处理程序。

更新：

我什至尝试在 addEventListener 中使用匿名 function。 这样做，控件似乎从未到达回调 function 内的闭包。

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

Answer 1

因此，如果我理解正确，您希望向元素添加事件侦听器，并配置一些在您添加侦听器时存在的其他数据，以便在调用时传递给侦听器。 如果这就是你想要做的，你只需要一个合适的关闭。 这样的事情，假设您想要将其他数据存储在对象中：

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

Answer 2

我怀疑你不能，但有一个诀窍：

element.clickArguments=new Object();
element.clickArguments.argument1=...;
element.clickArguments.argument2=...;

现在在您的事件处理程序中引用事件发送对象。

Answer 3

我知道这个线程已经过时了，但这是我在这里看到的一个常见错误。

我甚至尝试在addEventListener中使用匿名函数。 这样做，似乎控件从未到达回调函数内的闭包。
-
@asur

您需要从eventHandler()调用返回的闭包。

element.addEventListener("click", function(e){
    var data = {'event':e, 'args':arguments};
    eventHandler(data)();    // invoking the closure here
  }, false);

如果你不是，你只需要一个闭包返回二进制必杀技。

除此之外，它更适合@ jmm的解决方案，而它更干净。

Answer 4

我有一个 function，它有一个用于捕获当前相对值 URL 以及其他值的参数。 为了简单起见，我只提到URL的参数。

使用“event”作为关键字，如此处捕获事件 object：

function Analyze(url) {
if (event) {
// do something with the event object, such as:
alert(event.timeStamp);
// ...
}

function 在按钮中调用

onclick="Analyze(document.URL);".

是的，我知道这种形式的祈求让我变成了一个顽皮的男孩，但在这种情况下有一个很好的借口。

如果将“event”替换为“e”或“x”，此技术将不起作用，但可能还有其他可能性。

Answer 5

辅助功能：

function curryRight( original ) {
    var args = [].slice.call( arguments, 1 );
    return function() {
        return original.apply( this, [].slice.call( arguments ).concat( args ) );
    };
}

用法：

element.addEventListener("click", curryRight( eventHandler, 1, 2, 3 ), false );

例：

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