jQueryのonメソッドとは

onメソッドはイベントハンドラを指定した要素にアタッチする関数です。

  • .on(events[, selector][, data], handler)

引数にはイベント・セレクタ・データ・ハンドラの4種類を取ります。セレクタとデータは省略されることが多いです。

onメソッドによりイベントが起きたタイミングで、指定した要素に何らかの処理を起こすことができます。

具体的にはスクロール位置に合わせてトップに戻るボタンを表示したり、ボタンをクリックしたタイミングでテキストを変更したりです。


jQueryのonメソッドの基本

さて今後解説を行うにあたり使用するコードの全容を記載しましょう。


サンプルコード

以下のファイルを任意の名前のHTMLファイルに保存し、ブラウザで開くことで動作確認を行うことができます。

jQueryのバージョンは3.4.1です。

  1. <!DOCTYPE html>
  2. <html lang=”en”>
  3. <head>
  4. <meta charset=”utf-8″ />
  5. <title>jQuery.on() Method</title>
  6. <script src=”https://code.jquery.com/jquery-3.4.1.min.js” integrity=”sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=” crossorigin=”anonymous”></script>
  7. <style type=”text/css”><!–
  8. div.box { text-align: center; background: lightgray; }
  9. div.red, div.blue { display: inline-block; margin: 20px; width: 100px; height: 100px; }
  10. div.red { background: red; }
  11. div.blue { background: blue; }
  12. –></style>
  13. </head>
  14. <body>
  15. <div class=”box”>
  16.     <div class=”red”>Red Box</div>
  17.     <div class=”blue”>Blue Box</div>
  18. </div>
  19. <script>
  20.     $(‘.box’).on(‘mouseover’, ‘.red’, { text: ‘jQuery.on(): ‘ }, function(obj) {
  21.         console.log(obj.data.text + $(this).text());
  22.         alert(‘Hello, jQuery.on()!’);
  23.     });
  24. </script>
  25. </body>
  26. </html>

背景色灰のdiv要素の中に、赤と青の2種類のdiv要素が含まれています。

上記のサンプルコードは赤いdivにマウスを乗せると、コンソールログに「jQuery.on(): Red Box」テキストが出力される実装です。

上記のソースコードの<script>タグ内を書き換えながら解説を行います。


4つの引数

イベントはclick・change・blurなどのJavaScriptイベントを指定する引数です。

  • .on(イベント[, セレクタ][, データ], ハンドラ)

セレクタは「$(‘.box’)」と同様に要素を指定するものですが、こちらは動的な要素の指定も行えます。

データに任意のオブジェクトを指定することで、ハンドラにデータを渡すことが可能です。

ハンドラには実行する処理を記述します。

delegateメソッドとは引数の順番が異なりますのでご注意下さい。ちなみにバージョン3.0以降ではdelegateはdeprecated（非推奨）です。


events（イベント）の種類

イベントには大きく分けて以下の4種類があります。

  • Formイベント
  • Keyboardイベント
  • Mouseイベント
  • Browserイベント

それぞれのイベントを見ていきましょう。


Formイベント

フォーム関連で発生するイベントは以下です。

  • focus・focusin（フォーカスが当たったとき）
  • blur・focusout（フォーカスが外れたとき）
  • change（内容が変更されたとき）
  • select（選択されたとき）
  • submit（送信ボタンを押したとき）

focus・blurでは必ず対象のフォーム部品を直接指定します。focusin・focusoutは親のフォーム要素を指定することも可能です。


Keyboardイベント

キーボード入力によって発生するイベントを記載します。

  • keydown・keypress（キーを押したとき）
  • keyup（キーを放したとき）

keydownとkeypressは細かい挙動が異なるイベントです。

例えばCtrl・Alt・Shiftなどの特殊なキーを押した場合、keydownイベントは発生しますがkeypressイベントは発生しません。


Mouseイベント

マウスのボタン操作によって発生するイベントは以下になります。

  • click（クリックしたとき）
  • dblclick（ダブルクリックしたとき）
  • contextmenu（右クリックしたとき）
  • mousedown（マウスのボタンを押したとき）
  • mouseup（マウスのボタンを放したとき）

contextmenuは右クリックを禁止したり、オリジナルのコンテキストメニューを作成したりする際に使用するイベントです。

mousedownイベントは右クリック・左クリックの別なくマウスのボタンが押されたときに発生します。

またマウスのポインタ操作によって発生するイベントは以下です。

  • hover（マウスポインタを被せたとき）
  • mousemove（マウスポインタが動いたとき）
  • mouseenter・mouseover（マウスポインタが入ったとき）
  • mouseleave・mouseout（マウスポインタが離れたとき）

mouseenter・mouseleaveはイベントが対象の要素の境界のみで発生するのに対し、mouseover・mouseoutは子要素との境界でも発生します。


Browserイベント

ブラウザに対する何らかの操作で発生するイベントです。

  • resize（サイズを変更したとき）
  • scroll（スクロールしたとき）


events（イベント）の設定

イベントの設定方法について説明していきます。


イベント指定の基本

例えばclickイベントを指定すると以下です。

  1. $(‘.box’).on(‘click’, function() {
  2.     console.log(‘click result!’);
  3. });

またdblclickイベントを指定したものは以下になります。

  1. $(‘.box’).on(‘dblclick’, function() {
  2.     console.log(‘dblclick result!’);
  3. });


複数イベントを指定

上記の複数のイベントをまとめて記述する方法です。

イベントの引数に半角スペースで区切ったイベント名を入力します。

event.typeはイベントの種類を出力するeventオブジェクトのプロパティです。

  1. $(‘.box’).on(‘click dblclick’, function(event) {
  2.     console.log(event.type + ‘ result!’);
  3. });


複数イベントに複数メソッドを指定

また以下のように処理を別々にする記法もあります。

  1. $(‘.box’).on({
  2.     ‘click’: function(){
  3.         console.log(‘click result!’);
  4.     },
  5.     ‘dblclick’: function(){
  6.         console.log(‘dblclick result!’);
  7.     }
  8. }, ‘.blue’);

Custom Events（カスタムイベント）の設定

今までは既に用意されているイベントを中心に紹介してきました。

しかしjQueryにはユーザーが任意のイベントを発生させることができるメソッドが存在します。それがtriggerメソッドです。


triggerメソッド

triggerは手動でイベントを発生させるメソッドで、例えば以下のように使用します。

  1. $(‘.red’).on(‘click’, function(){
  2.     console.log(‘red click result!’);
  3.     $(‘.blue’).trigger(‘dblclick’);
  4. });
  5. $(‘.blue’).on(‘dblclick’, function(){
  6.     console.log(‘blue dblclick result!’);
  7. });

赤のdiv要素をクリックするとハンドラのtriggerメソッドによって、青のdiv要素にdblclickイベントが発生するでしょう。


カスタムイベント

カスタムイベントはあらかじめdocumentオブジェクトに登録しておく必要があります。このとき使用するのがonメソッドです。

  1. $(document).on(‘custom’, function() {
  2.     console.log(‘custom!’);
  3. })
  4. $(‘.red’).on(‘click’, function(){
  5.     $(document).trigger(‘custom’);
  6. });

赤のdiv要素をクリックするとcustomイベントが発生し、コンソールに「custom!」が出力されます。


selector（セレクタ）を指定する理由

一見するとjQueryオブジェクトのセレクタだけでも対応できそうです。わざわざセレクタを指定する必要はないように見えます。

そもそも何故何らかのイベントが発生したときに、onメソッドで設定しておいたハンドラの処理が実行されるのでしょうか。

それはイベントが発生する度にjQueryオブジェクトで指定した要素の状態を確認しているからです。

要素の範囲が大きいほど負荷がかかり、速度が遅くなります。jQueryオブジェクトのセレクタの指定はこの範囲を絞るためのものです。

そしてonメソッドのセレクタで指定しているのは、実際にその作用を起こさせる要素になります。


selector（セレクタ）の設定

具体的な例を持ってきましょう。セレクタは以下の「’.red’」のように指定します。

  1. <!– .boxの末尾に追加 –>
  2. <div><button>Button</button></div>
  1. $(‘button’).click(function(){
  2.     $(‘<div></div>’, { class: ‘red’, text: ‘New Red Box’ }).appendTo(‘.box’);
  3.     $(‘<div></div>’, { class: ‘blue’, text: ‘New Blue Box’ }).appendTo(‘.box’);
  4. });
  5. $(‘.box’).on(‘click’, ‘.red’, function(){
  6.     console.log($(this).text());
  7. });
  8. $(‘.blue’).on(‘click’, function(){
  9.     console.log($(this).text());
  10. });

ボタンをクリックするとNew Red BoxとNew Blue Boxが追加されている筈です。こちらが動的に追加された要素になります。

Red Box・Blue Box・New Red Boxをクリックすると、コンソールに文字が出力されるでしょう。

ところがNew Blue Boxはいくらクリックしてもコンソールに文字が出力されません。


jQuery onメソッドと他メソッドの違い

onメソッドと同様の動きをする書き方は沢山あります。書き方を変えたら動くようにはなったけど、違いが分からないという方は必見です。

ここできちんと理解しておきましょう。


jQuery onメソッドとclickメソッドの違い

さてonメソッドの話題で必ず解説されるのがonメソッドとclickメソッドの違いです。

前項のサンプルコードにおいて$(‘.blue’)jQueryオブジェクトのメソッドを以下のように書き換えます。

  1. $(‘.blue’).click(function(){
  2.     console.log($(this).text());
  3. });

同じ動作結果になりました。

jQueryオブジェクトに対してonメソッドやclickメソッドで記述した処理は、最初の読み込みの段階で存在する要素に登録されます。

後から追加された要素には処理が登録されていないため、こちらも反応しないという訳です。


jQuery onメソッドとbindメソッドの違い

onメソッドはbindメソッドの問題を解決した後継メソッドです。

  • .bind( eventType[, eventData], handler)

eventTypeはonメソッドのevents、eventDataはdataに相当します。

  1. $(‘.box’).bind(‘click’, { text: ‘jQuery.on(): ‘ }, function(obj) {
  2.     console.log(obj.data.text + $(this).text());
  3. });

セレクタ設定がありません。つまり動的な要素に対して指定を行えないため、onよりも使える場面が限定されるということです。

またbindメソッドもバージョン3.0以降ではdeprecated（非推奨）になりました。

今後はonメソッドを使用しましょう。


data（データ）の設定

データには任意のオブジェクトを指定でき、event.dataで取り出すことができます。

  1. let data = {
  2.     text: ‘jQuery.on()’,
  3.     num: 10,
  4.     list: [1, 2, 3, 4, 5],
  5.     obj: { text: ‘Object’, num: 6, list: [7, 8] },
  6. };
  7. $(‘.box’).on(‘click’, ‘.red’, data, function(event) {
  8.     console.log(event.data.text);
  9.     console.log(event.data.num);
  10.     console.log(event.data.list);
  11.     console.log(event.data.obj);
  12. });

データは引数として別に渡せるので、データに可変データを持たせれば1つのメソッドで異なる動作をさせることもできるでしょう。


おわりに

onメソッドについての理解は深まりましたか。複数イベントの指定方法は知らない方もいたのではないでしょうか。

またセレクタ設定による動作の違いは、理屈から理解しておくと良いでしょう。

その後同じようなメソッドや現象に遭遇しても、自力で対処できるようになります。

サンプルコードを修正して色々試してみましょう。


toiroフリーランスは、SHIFTグループがプライムとして参画している独自案件をフリーランスエンジニア向けに紹介する唯一のプラットフォームサービスです。

エージェントによるサポートもありますので、ご利用を検討してみてはいかがでしょうか。