jQueryでパラメータを関連付ける方法

最新の JavaScript フレームワークの中で最も人気のあるライブラリの 1 つである jQuery は、ハンドラーを HTML 要素にバインドする便利な方法を提供します。このタスクを実装する場合、多くの場合、ハンドラー関数にパラメーターを渡すことが必要になります。この記事ではjQueryでパラメータを関連付ける方法を紹介します。

1. .bind() メソッドを使用する

jQuery の .bind() メソッドは、イベント ハンドラーを要素にバインドするために最も一般的に使用されるメソッドの 1 つです。 .click()、.keyup()、および .blur() を使用する場合とは異なり、.bind() メソッドを使用するとイベント ハンドラーでパラメーターを渡すことができます。次の例では、文字列と整数をイベント ハンドラーに渡します。

$("button").bind("click", { value1: "hello", value2: 123 }, function (event) {
    alert("First Value: " + event.data.value1 + " Second Value: " + event.data.value2);
})

上記のコードでは、オブジェクトを .bind() メソッドに渡します。このオブジェクトには 1 つの値と、 2 番目の値。イベント ハンドラーでは、event.data オブジェクトにアクセスしてこれらの値にアクセスします。

2. .on() メソッドを使用する

.bind() とは異なり、.on() を使用すると、複数のイベントをバインドし、イベント タイプに応じてパラメーターを渡すことができます。次の例では、クリック イベントとホバー イベントをバインドし、カスタム文字列をハンドラーに渡します。

$("button").on({
    click: function(event) {
        alert("Clicked " + event.data.userName);
    },
    mouseover: function(event) {
        alert("Hovered " + event.data.userName);
    }
}, { userName: "John Doe" });

上記のコードでは、JSON オブジェクトを .on() メソッドに渡します。このオブジェクトには 2 つの関数が含まれており、各関数はイベント タイプに対応します。 JSON オブジェクトの 2 番目のパラメーターは、イベント ハンドラーに渡されるオブジェクトです。

3. .trigger() メソッドを使用する

jQuery の .trigger() メソッドを使用すると、パラメーターを手動で渡すと同時にイベントをシミュレートできます。次のコードでは、クリック イベントをシミュレートし、文字列「foo」と整数 23 をイベント ハンドラーに渡します。

$("button").trigger('click', ['foo', 23]);

イベント ハンドラー関数では、イベント オブジェクト Strings を通じてこの文字にアクセスできます。そして整数。例:

$("button").bind("click", function(event, str, num) {
    alert("Value1: " + str + " Value2: " + num);
});

上記のコードでは、イベント オブジェクトはクリック イベントを表し、str と num は .trigger() メソッドに渡されるパラメーター値を表します。

概要:

jQuery では、パラメーターを渡す方法がたくさんあります。 .bind()、.on()、または .trigger() のいずれかがこれを行います。これらのメソッドのいずれかを使用すると、ハンドラーに情報を迅速かつ簡単に渡し、JavaScript スクリプトの保守を容易にすることができます。

以上がjQueryでパラメータを関連付ける方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。