イベントと他の引数をクリックハンドラに渡す方法

Question

ねえ、私はeaselJSを使ってキャンバスをビルドしました。私のキャンバスでは、私はクリックハンドラは、次の構文を使用して、彼らのために定義されたポイントいる を：

p.on("click", handleMouseClickEvent); 

は、今私は、ハンドラhandleMouseClickEventに引数を渡したい、私は私がのイベントオブジェクトを取得することを知っていますそれを介さずに自由に、しかし、私は1つの引数を渡すためにしようとすると、私が書く言うことができます：

p.on("click", handleMouseClickEvent(arg1)); 

そして、イベントオブジェクトが未定義とまったくアクセスできません。 上記の構文を使用して、イベントオブジェクトとより多くの引数を渡すにはどうすればよいですか。

p.on("click", handleMouseClickEvent(arg1,arg2,...,argN)); 

Answer 1

コンテキスト固有の回答をミックスに追加するだけです。 http://codepen.io/Barak/pen/AXZxKN

アーキテクチャーの観点から、ハンドラーにパラメーターを注入することは、必要のない回避策です。代わりに、event targetを使用して、クリック/相互作用にアクセスし、必要な値を決定します。

たとえば、グラフのポイントをプロットするために使用された元のデータプロパティを探しています。これらのプロパティを表示オブジェクトに挿入したり、元のデータオブジェクトへの参照を挿入したり、ルックアップテーブルを作成して、表示オブジェクトを関連するデータポイントに関連付けることができます。

for (...) { 
    var point = data[i]; 
    var dot = new createjs.Shape(); 
    dot.x = point.x * GRAPH_WIDTH; 

    // Inject property or reference 
    dot.point = point; 

    // Create lookup 
    lookupTable[i] = dot; 
} 

次に、オブジェクトをクリックすると、データを参照します。

dot.on("click", function(event) { 
    var dot = event.target; 

    // Use reference 
    var point = dot.point; 

    // Or use lookup 
    var index = lookup.indexOf(dot); 

    //...do stuff with it 
} 

はこの関係を作成するための他の方法はたくさんありますが、これらはほんの一部の提案です。ラッパー関数を作成することはできますが、IMHOは長期間または大きなアプリケーションのための大きなアプローチではありません。あなたはあなたのために働いているように見えますが、あなたのアプローチを完全に使い続けることができます。しかし、私は思考のための食べ物を提供したいと思っていました。

乾杯。

Answer 2

ハンドラ関数を自分で呼び出すわけではないので（ブラウザが処理しているので）、ハンドラにさらに引数を指定する必要はありません。イベントオブジェクトのみが表示されます。

しかし、JavaScriptの変数スコープがどのように機能するので、あなたはそうする必要はありません。あなたは、単に明示的にそれらを渡さずに変数にアクセスできるような機能は、自身の外の変数へのアクセス権を持っている：

var foo = "bar"; 

var handleMouseClickEvent = function(e) { 
    console.log(e.type); // 'click' 
    console.log(foo); // 'bar' 
}; 

p.on("click", handleMouseClickEvent); 

Answer 3

あなたはこれを試すことができます。

p.on("click", null, {arg1: "abc", arg2: "xyz"},handleMouseClickEvent); 

//And in your function, you can get the event data like this 

function handleMouseClickEvent() 
{ 
    alert(event.data.arg1); 
    alert(event.data.arg2); 
} 

公式documenatationによると、onは次のように引数を取ります。

.on（イベント[セレクタ] [データ]、ハンドラー）

のイベント型：String

つ以上のスペースで区切られたイベントタイプとオプションの名前空間、 などの「クリック」または「keydown.myPlugin」。

セレクタ型：String

>>>イベントをトリガする選択された要素の子孫をフィルタリングするセレクタ文字列。セレクタがnullまたは省略されている場合、イベントは選択された要素に到達すると常に になります。

データタイプ：イベントがトリガされたときに何

データはevent.dataにハンドラに渡されます。

ハンドラタイプ：イベントがトリガ あるときに実行する機能（イベントEVENTOBJECT [、何 extraParameter] [、...]）

機能。値falseは、単にfalseを返す 関数の略語としても許されています。jQueryのを使用している場合

詳細については、

Answer 4

JQuery Documentation of on() event Handlerを参照してください、ラヴィの答えは、おそらく最良の方法です。 私はあなたの質問を解決する別の視点を提供しようとします。

p.on("click", handleMouseClickEvent(arg1)); 

を使用することにより、あなたはそれを実行し、イベントハンドラとして、その戻り値を渡している、イベントハンドラとしての機能を渡していません。 これはおそらく既にあなたに答えを指していたでしょうか？ このようなあなたのイベントハンドラを定義してください：あなたが好きなもちろん

function handleMouseClickEvent(arg1)) { 
    return function reallyHandleMouseClickEvent(event) { 
     // all variables available here: arg1, event 
    } 
} 

、あなたはできるだけ多くARGNパラメーターを追加することができます。

Answer 5

これはそれを処理する必要があります。さらに引数を追加できます。

あなたのイベントハンドラを定義する必要が

(function(arg1, arg2) { 
    p.on("click", function(event) { handleMouseClickEvent(event, arg1, arg2) }) 
})(arg1, arg2); 

Answer 6

、これを試してみてください。

function handleMouseClickEvent(arg1)) { 
    return function doSomething(event) { 
     //logic here 
    } 
} 

Answer 7

引数はFunction.prototype.bind

p.on("click", handleEventWithArg.bind(this,arg1)); 

function handleEventWithArg(arg1, event) { 
    console.log(arg1); 
    console.log(event); 
}); 

.bind方法でハンドラ関数にバインドすることができ、新たなfunctonを返します。ブラウザがイベントオブジェクトで呼び出すことができます。