jquery - on（）へのデータの受け渡し

Question

var i = 1;

$('select').on("change", i, function () {
    alert(i);
});

これは何もしていません。理由はわかりません...

var i = 1;

$('select').change(function (i) {
    alert(i);
});

これは[オブジェクトオブジェクト]を返します

とにかく、変更メソッドにintを渡せるようにしたいと思いますが、何が間違っているのかわかりません。

Answer 1

イベント内の関数のパラメーターは、渡すパラメーターではなく、イベントオブジェクトであり、イベントの実行時にjQueryによって渡されます。

に値を渡すことができ.on、その値はに表示されevent.dataます。

例：

var i = 1;

$('select').on("change", i, function (e) {
    alert(e.data);  // e.data will be the variable passed to .on
});

または、関数の外側で宣言しているのでi、関数の内側で使用できます。

var i = 1;

$('select').on("change", function (e) {
    alert(i);
});

Answer 2

iはグローバル変数であるため、以下のコードは機能するはずです

var i = 1;

$('select').on("change", function() {
    alert(i);
});

または、イベントにデータとして渡したい場合iは、これも機能します。

var i = 1;
$('select').on("change", {i: i}, function(e) {
    alert(e.data.i);
});

Answer 3

これは[オブジェクトオブジェクト]を返します

$('select').change(function (i) {
    alert(i);
});

iこれは、変数をイベントハンドラーに渡すのではなく、名前が。の最初のパラメーターを使用してハンドラーを定義します。イベントがトリガーされると、ハンドラーが呼び出され、現在のイベントオブジェクトが最初の引数として渡されます。つまり、そのイベントオブジェクトを参照します^[docs]。 ii

関数に引数を渡すことができるのは、関数を定義するときではなく、呼び出すときだけです。

---

これは何もしていません。理由はわかりません...

$('select').on("change", i, function () {
   alert(i);
});

渡す2番目の引数.onは、イベントの委任を許可するセレクターを含む文字列であると想定されています。を含むオブジェクトイベントハンドラー内で使用できるようにするデータ。ただし、このデータはイベントハンドラーに直接渡されることはありませんが、イベントオブジェクトの.dataプロパティを介してアクセスできます（以下を参照）。

---

そうは言っても、2つの可能性があります。

1. Omarが彼の答えに示しているように、ハンドラーをクロージャーとして使用します。ただし、i変更してイベントハンドラーが実行されるたびに、現在の値が。になることに注意してiください。

2. iのスナップショット、つまりイベントハンドラーを定義するときに持っている値を「渡す」場合は、すでに述べ.onたように、ハンドラーのイベントオブジェクトを介してアクセスできるデータオブジェクトを渡すことができます。

   $('select').on("change", {value: i}, function(event) {
       alert(event.data.value);
   });
   

   詳細については、 event.data ^{[ドキュメント]}を参照してください。

---

.on ^[docs]のドキュメントを読むことを強くお勧めします。これには、jQueryでのイベント処理とその動作に関する多くの情報が含まれています。また、関数がどのように機能するかを完全には理解していないようです。その場合は、関数に関するMDNJavaScriptガイドのセクションを参照してください。

Answer 4

これは役立つ可能性があります：

1）あなたがするとき

$('select').on('change',i,function(ev){...}); 

次に、値iがev.dataに割り当てられます。したがって、ハンドラーで次のことができます。

$('select').on('change',i,function(ev){
     alert(ev.data)
}); 

2）JSでは、スコープがJSでどのように機能するかについて読みたいと思うので、2番目のものが期待どおりに機能しない理由をよりよく理解するために。

ただし、要約は、アラートでアクセスしている変数iは、イベントハンドラスコープのローカル変数です。

function(i){ alert(i) },// here i is the event object .

変数名をxに変更するだけで、機能するはずです。

var i = 1;

$('select').change(function (x) {
    alert(i);
});