jquery on イベント一覧

jQuery on イベント一覧: あなたのWebサイトに命を吹き込むイベント処理

jQuery on イベント一覧: あなたのWebサイトに命を吹き込むイベント処理

JavaScriptライブラリjQueryを使って、Webサイトに動的なインタラクションを追加する方法を探していますか？ この記事では、on()メソッドを用いたjQueryイベント処理の基本から、様々なイベントタイプ、そして実用的な使用例までご紹介します。初心者の方でも理解しやすいように、コード例を交えながら詳しく解説します。

---

1. jQueryイベントとは？ - インタラクティブなWeb体験の鍵

  • Webページにおけるユーザーのアクション（クリック、マウスオーバーなど）を「イベント」と呼ぶ。
  • イベント発生時に特定の処理を実行させることで、動的なWebページを作成できる。
  • jQueryは、イベント処理を簡潔に記述できるメソッドを提供。

2. jQuery on() メソッド - あらゆるイベントに対応する万能メソッド

  • on()メソッドは、複数のイベントタイプを同時に設定可能。
  • 従来のclick()やmouseover()といったイベント別メソッドは、on()メソッドに集約される傾向。
  • $(セレクタ).on('イベントタイプ', function() { 実行する処理 }); のように記述する。

3. 代表的なイベントタイプ一覧 - クリック、マウス、キーボード、フォーム、そして...

(1) マウスイベント

イベントタイプ 説明
click 要素のクリック
dblclick 要素のダブルクリック
mousedown マウスボタンを押した瞬間
mouseup マウスボタンを離した瞬間
mouseover マウスポインターを要素の上に移動
mouseout マウスポインターを要素の外に移動
mousemove マウスポインターを要素の上で移動

(2) キーボードイベント

イベントタイプ 説明
keydown キーを押した瞬間
keyup キーを離した瞬間
keypress キーを押して、文字が入力された瞬間

(3) フォームイベント

イベントタイプ 説明
submit フォーム送信
focus フォーム要素にフォーカス
blur フォーム要素からフォーカスが外れる
change フォーム要素の値が変更

(4) ウィンドウイベント

イベントタイプ 説明
load ページ、画像などの読み込み完了
scroll スクロール
resize ウィンドウサイズ変更

4. 実践！jQuery on() メソッド活用例

(1) ボタンクリックで要素を表示


<button id="showButton">表示</button>
<div id="hiddenElement" style="display: none;">隠された要素</div>

<script>
  $("#showButton").on("click", function() {
    $("#hiddenElement").show();
  });
</script>

(2) 入力欄にフォーカスでヒントを表示


<input type="text" id="inputField">
<span id="hint"></span>

<script>
  $("#inputField").on("focus", function() {
    $("#hint").text("入力してください");
  }).on("blur", function() {
    $("#hint").text("");
  });
</script>

(3) ウィンドウスクロールでヘッダーを固定


<header id="header">ヘッダー</header>

<script>
  $(window).on("scroll", function() {
    if ($(window).scrollTop() > 100) {
      $("#header").addClass("fixed");
    } else {
      $("#header").removeClass("fixed");
    }
  });
</script>

5. まとめ - jQuery on() メソッドでWebサイトをもっとリッチに！

on() メソッドを活用することで、多様なイベントタイプに対応したインタラクティブなWebサイトを構築できます。今回の記事を参考に、ぜひご自身のWebサイトに jQuery イベント処理を実装してみてください。

---

jQuery on() 関連Q&A

Q1: on() メソッドと従来のイベント別メソッド (click(), mouseover() など) の違いは何ですか？

A1: on() メソッドは、複数のイベントタイプを同時に設定できる点で優れています。また、動的に追加された要素に対してもイベントを設定することができます。従来のイベント別メソッドは、on() メソッドに集約される傾向にあります。

Q2: イベントハンドラ内で this は何を指しますか？

A2: イベントハンドラ内で this は、イベントが発生した要素自身を指します。jQueryオブジェクトとして扱う場合は、$(this)と記述する必要があります。

Q3: イベントの伝播を停止するにはどうすればよいですか？

A3: イベントの伝播を停止するには、イベントハンドラ内で event.stopPropagation() を実行します。これにより、親要素にイベントが伝播することを防ぎます。

---

※ 本記事は、jQuery 公式サイトを参考に作成しています。

その他の参考記事:jquery on 複数