jquery のすべての使用法

jQuery は、JavaScript プログラミングを簡単かつ高速にするさまざまな機能を提供する人気の JavaScript ライブラリです。その中でも、jQuery の .on() メソッドは、開発者が動的イベントを作成し、イベント ハンドラーをバインドし、イベント リスナーを追加するのに役立つ非常に実用的なメソッドです。この記事では、.on() メソッドのすべての使用法を紹介します。

1. 基本構文

.on() メソッドは、イベント ハンドラーとイベント リスナーを追加するために使用されます。その基本構文は次のとおりです:

$(selector).on(event,childSelector,data,function);

このうち、

• selector: イベントにバインドされる要素を選択するために使用され、CSS セレクターまたは jQuery オブジェクトが可能です;
• event: click、mousedown、mousemove など、バインドするイベント タイプを指定します。
• childSelector: オプションのパラメーター、イベントにバインドされる子孫要素をフィルターするために使用されます;
• data: オプションのパラメーター、イベント ハンドラーに渡されるパラメーター;
• function: バインドするイベント ハンドラーを指定します。組み込み関数、ユーザー定義関数、または匿名関数を指定できます。

2. .on() メソッドの使用法

.on() メソッドには多くの用途がありますが、以下はその 1 つです。 1つ紹介します。

1. 単一のイベントをリッスンする

次の例では、すべての button 要素に click イベント リスナーを追加します。 ## さらに、

.on()

メソッドは、mousedown、mousemove、keydown などの他のイベント タイプもサポートします。 。 2. 複数のイベントをリッスンする

.on()

メソッドは複数のイベントのバインドもサポートしています。次の例では、click、## を追加します。 #mousedown および mouseup イベント リスナー:

$("button").on("click", function() {
  alert("你单击了按钮！");
});

3. 子孫要素 .on を指定します ()

メソッドは子孫のフィルター処理もサポートしますイベントがバインドされる要素。次の例では、

ul

要素内のすべての

li 要素をリッスンする click イベントを追加します。ツール:

$("button").on("click mousedown mouseup", function() {
  alert("你与按钮交互了！");
});

4. 複数のイベントを一度にトリガーする複数のイベント タイプをパラメータとして on()

メソッドに渡すことで、これらのイベント タイプを一度にトリガーできます。次の例:

$("ul").on("click", "li", function() {
  alert("你单击了列表项！");
});

5. イベント バブリングの使用

イベント バブリングを使用すると、イベントが発生したときに、イベントを動的要素にバインドできます。つまり、イベント ハンドラーを親要素にバインドできます。が子要素でトリガーされると、イベントは子要素から親要素にバブルアップして、イベント ハンドラーをトリガーします。

次の例では、

click

イベント リスナーをすべての

button

要素とその動的に追加された子要素に追加します:

$("button").on({
  mouseenter: function() {
    $(this).css("background-color", "lightgray");
  },
  mouseleave: function() {
    $(this).css("background-color", "white");
  },
  click: function() {
    $(this).css("background-color", "yellow");
  }
});

6. データを渡す 追加のデータをイベント ハンドラーに渡す必要がある場合があります。これは、.on()

メソッドの

data

パラメーターを通じて実現できます。次の例では、すべての

button 要素に追加データを渡します:

$("button").on("click", function() {
  alert("你单击了按钮！");
});

// 动态添加元素
$("button").append("新增按钮");

3. Summary.on() メソッドは豊富な関数を提供し、開発者が動的イベントを作成し、イベント ハンドラーをバインドし、イベント リスナーを追加するのに役立ちます。この記事では、

単一イベントのリッスン、複数のイベントのリッスン、 を含む、.on()

メソッドのすべての使用法を紹介します。

子孫要素を指定します;
• 一度に複数のイベントをトリガーします;
• イベント バブリングを使用します;
• データを渡します。
.on()
• メソッドの使用に習熟すると、JavaScript プログラミングの効率が大幅に向上します。

以上がjquery のすべての使用法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。