jQuery イベントをマスターする

はじめに

jQuery ドキュメントへようこそ！この実験では jQuery イベントについて紹介します。

jQuery は、セレクションにイベントハンドラを追加するための簡単なメソッドを提供します。イベントが発生すると、提供された関数が実行されます。関数の中では、this はイベントを引き起こした DOM 要素を指します。

イベントハンドリング関数はイベントオブジェクトを受け取ることができます。このオブジェクトは、イベントの性質を判断したり、イベントの既定の動作を防止したりするために使用できます。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL jquery(("jQuery")) -.-> jquery/EventHandlingGroup(["Event Handling"]) jquery/EventHandlingGroup -.-> jquery/event_methods("Event Methods") subgraph Lab Skills jquery/event_methods -.-> lab-153789{{"jQuery イベントの基本"}} end

DOM 要素にイベント応答を設定する

VM には既に index.html が用意されています。

jQuery を使えば、ページ要素にイベント駆動型の応答を設定することが簡単にできます。これらのイベントは、多くの場合、エンドユーザーがページとのインタラクションによってトリガーされます。たとえば、フォーム要素にテキストを入力したり、マウスポインタを移動させたりするときです。一部のケースでは、ページの読み込みやアンロードイベントのように、ブラウザ自体がイベントをトリガーします。

jQuery は、ほとんどのネイティブなブラウザイベントに便利なメソッドを提供しています。これらのメソッド（.click()、.focus()、.blur()、.change() など）は、jQuery の .on() メソッドの省略形です。on メソッドは、同じハンドラ関数を複数のイベントにバインドしたり、イベントハンドラにデータを渡したり、カスタムイベントを扱ったり、複数のイベントとハンドラのオブジェクトを渡したいときに便利です。

// 便利なメソッドを使ったイベント設定
$("p").click(function () {
  console.log("You clicked a paragraph!");
});

// `.on()` メソッドを使った同等のイベント設定
$("p").on("click", function () {
  console.log("click");
});

右下隅の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行してください。その後、Web 8080 タブを更新して、ウェブページをプレビューできます。

新しいページ要素にイベントを拡張する

.on() は、イベントリスナーを設定する際に存在する要素にのみイベントリスナーを作成できることに注意する必要があります。たとえば：

$(document).ready(function () {
  // ここで、alert クラスを持つ新しいボタン要素を作成します。
  $("<button class='alert'>Alert!</button>").appendTo(document.body);
  // 実行時に DOM に存在する alert クラスを持つすべてのボタン要素にクリック動作を設定します
  $("button.alert").on("click", function () {
    console.log("A button with the alert class was clicked!");
  });
});

イベントリスナーが設定された後に同様の要素が作成された場合、それらは自動的に以前に設定したイベントの動作を拾い上げません。

Web 8080 タブを更新して、ウェブページをプレビューできます。

複数のイベント応答を設定する

多くの場合、アプリケーション内の要素は複数のイベントにバインドされます。複数のイベントが同じハンドリング関数を共有する場合、イベントタイプを空白区切りのリストとして .on() に渡すことができます。

// 複数のイベント、同じハンドラ
$("div").on(
  "click change", // 複数のイベントに対するハンドラをバインド
  function () {
    console.log("An input was clicked or changed!");
  }
);

各イベントに独自のハンドラがある場合、イベント名をキーとし、イベントを処理する関数を値とする 1 つ以上のキー/値ペアを含むオブジェクトを .on() に渡すことができます。

// 異なるハンドラで複数のイベントをバインド
$("div").on({
  click: function () {
    console.log("clicked!");
  },
  mouseover: function () {
    console.log("hovered!");
  }
});

Web 8080 タブを更新して、ウェブページをプレビューできます。

まとめ

おめでとうございます！あなたは jQuery イベントの基本の実験を完了しました。jQuery API について詳しく学ぶには、公式の jQuery ドキュメントをご覧ください。