jquery 複数イベント 同じ処理

jQueryで複数のイベントに同じ処理を割り当てる方法【サンプルコード付き】

Description: JavaScriptライブラリjQueryを使って、複数のイベントに同じ処理を効率的に割り当てる方法を解説します。 on() メソッド を使った基本的な方法から、実用的なサンプルコード、注意点まで網羅しており、初心者の方でも安心して学べます。

---

複数のイベントに同じ処理を割り当てるメリット

  • コードの重複を減らし、可読性を向上できます。
  • 保守性を高め、コードの修正を容易にします。
---

jQueryのon()メソッドを使った基本

  • on() メソッドを使うと、複数のイベントをスペース区切りで指定できます。

$("要素").on("イベント1 イベント2 ...", function() {
    // 実行したい処理
});
  • 例：クリックとマウスオーバー時に背景色を変える

$("p").on("click mouseover", function() {
    $(this).css("background-color", "yellow");
});
---

実用的なサンプルコード

  • ボタンとリンクに同じクリックイベントを割り当てる

$("button, a").on("click", function() {
    alert("クリックされました！");
});
  • 複数の入力フィールドに同じ入力イベントを割り当てる

$("input[type='text'], input[type='email']").on("input", function() {
    console.log($(this).val()); 
});
  • 動的に追加された要素にもイベントを適用する

$(document).on("click", ".dynamic-button", function() {
    // ...
});
---

注意点

  • イベントの順序が重要な場合は注意が必要です。
  • パフォーマンスを考慮する場合は、イベントの数を必要最小限に抑えましょう。
---

まとめ

jQueryのon() メソッドを利用すれば、複数のイベントに同じ処理を効率的に割り当てることができます。 本記事で紹介した方法を参考に、より効率的で可読性の高いコードを作成しましょう。

---

関連QA

質問 回答
jQueryのon()メソッドと、従来のイベントハンドラ登録方法との違いは何ですか？ on()メソッドは、動的に追加された要素に対してもイベントを適用できるなど、より柔軟なイベント処理を実現できます。
複数のイベントを指定する際に、イベント名の間には何を入れたら良いですか？ イベント名の間には、半角スペースを入れて区切ります。
on()メソッドで登録したイベントハンドラを解除するにはどうすれば良いですか？ off()メソッドを使用して、イベントハンドラを解除することができます。

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