2012-01-20 17 views
3

Function.prototype.bindを使用せずに、イベントオブジェクトと共に複数の引数をイベントハンドラに渡すにはどうすればよいですか?イベントオブジェクトと共に複数の引数をイベントハンドラに渡す - javascript

イベントハンドラにはクロージャがあります。

基本的なコードの下にザ・私は、イベントハンドラに同時にイベントオブジェクトや他の引数を渡す方法がわからない、

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

答えて

12

私が正しく理解している場合は、イベントリスナーを要素に追加し、呼び出されたときにリスナーに追加するときに存在する追加データを構成してリスナーに渡す必要があります。それがあなたがしたいことなら、あなたはちょうど適切な閉鎖が必要です。

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

私はあなたができない疑いがある、しかしトリックがあります:

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

は、オブジェクトを発するイベントを参照するイベントハンドラで今すぐ。

+0

このような何か、あなたがオブジェクトに追加データを格納したいと仮定すると素晴らしい解決策...私はカスタムイブを作るオーバーヘッドを救ったnts。ありがとう! – lauCosma

0

ヘルパー関数:

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); 
関連する問題