將多個 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 );