Question

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

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

以下基本代码不起作用，

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

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

我不知道如何将事件对象和其他参数同时传递给事件处理程序。

更新：

我甚至尝试在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));
  };
}

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

辅助功能：

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

Answer 4

我知道这个线程很旧，但这是我在这里看到的一个常见错误。

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

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

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

如果不这样做，您将获得一个封闭式的二元必杀技。

除了@jmm的解决方案更干净外，它还是更可取的。

将多个参数与事件对象一起传递给事件处理程序--javascript

4 个答案: