javascript - jQueryイベントハンドラーにデータを渡す

Question

シナリオ

GUIでは、ユーザーはテキスト入力にテキストを挿入してからボタンをクリックします。挿入されたテキストはdivに表示されます。

入力要素オブジェクトにアクセスするハンドラー内に出力テキストを設定するという簡単な解決策（ここではデモ）を見つけました。最悪だ。むしろ、（要素ではなく）入力テキストをハンドラーに渡します。

質問

パラメータ（この場合は入力メッセージテキスト）をハンドラ関数に渡すにはどうすればよいですか？

Answer 1

jsFiddleのコードを変更しました。event.data jQueryでは、データを引数として渡し、 jQueryリファレンスを使用してデータにアクセスできます。

Answer 2

/*
 * I would not to referer UI elements here
 * Rather I would pass the $('#txtMessage').val() to the handler
 */

それは不可能です。

その入力要素の現在の値を使用する場合は、UI要素自体にアクセスする必要があります。

アクセスする特定の要素をイベントハンドラーから切り離すことを目的としている場合は、イベントデータを使用してハンドラーに渡すことで簡単に実行できます。例：

$(sel).on('click', {
   source: document.getElementById('txtMessage')
}, handler);

とコールバックで：

function handler(event) {
    var txt = event.data.source.value;
    ...
}

jQueryイベントデータは、key: value上記のようにペアのマップであると想定されていることに注意してください。受け入れられた回答に示されているようにjQueryオブジェクトを直接渡すと、簡単に壊れてしまう可能性があります。

Answer 3

これを確認してください-http://api.jquery.com/event.data/

JSは次のようになります（テストされていません）：

$('#myButton').on("click", {val: $('#txtMessage').val()}, function(event){
    $('#divOutput').html(event.data.val);
});​

Answer 4

これにより、入力要素の現在の値がわかります。基本的には入力要素にアクセスしますが、現在の値を取得したい場合はそれを回避する方法はありません

$('#myButton').on("click", {val: function (){ return $('#txtMessage').val()}}, function(event){
    $('#divOutput').html(event.data.val());
});​