JavaScript

jQueryでイベント処理を設定するためのonメソッドについて解説

いろんなWebページを見ているとクリックしたり、オンマウスすると文字が表示されたり、詳しいメニューが現れたりするサイトを見たことがあると思います。jQueryを使えば同じようにユーザーのアクションによって、文字を出現させたり、レイアウトを変えたりすることが可能です。

その際、使われるのがonメソッドです。アクションが起きたときに処理を実行させるつなぎのような役割を持っています。onメソッドを使いこなせれば、Webページの機能やレイアウトに幅を持たせることができます。

本記事ではjQueryでユーザーのアクションによって表示を変えるためのonメソッドの使い方を解説します。

onメソッドはイベント処理を設定できる

jQueryでonメソッドを使うとイベント処理を設定することができます。イベント処理とはクリックやマウスが要素に乗ったときなどユーザーのアクションが合った時に、処理を実行することです。

onメソッドを使えば、webページを最小化したり、ユーザーに見たい情報をすぐに見てもらうことができるようなレイアウトが作れます。jQueryを使う上で、頻繁に使うメソッドの1つなので、使い方を覚えておくことをおすすめします。

基本構文

onメソッドを使うための基本構文は以下の通りです。

$(“セレクタ”).on(“events”,”selector”,{data},function(){
    eventで設定したアクションが起きた時の処理;
});

eventsとfunctionは必須ですが、selectorとdataは必要に応じて設定すればOKです。eventで設定したアクションが起きた時の処理は何個でも設定でき、順次処理されます。events、selectorはダブルクォーテーションで囲われているので間違えないように気を付けることが必要です。

onメソッドに使う引数

events

eventsは要素に対して処理を起こすためのきっかけとなるアクションを設定します。セレクタに対してeventsで設定したアクションが起こすことが処理を開始するきっかけとなります。例えば、clickを設定すればクリックしたら、処理が実行されます。

また、eventsは複数設定できます。clickとmouseseenterを一緒に設定すればクリックしたときか要素にマウスポインタが入ってきたときに処理が実行されます。使う機会は少ないとは思いますが、覚えておくとイベント設定の幅が広がります。

selector

selectorを設定するときはイベントデリゲートを使う際に利用されます。デリゲートとはイベントが発生した要素が別の要素にイベント処理を任せる機能になります。例えば、ul要素の中にliがあるとします。liの部分にイベント処理をすると考えると以下のようになります。

$(“li”).on(“click”,function(){
   $(this).css(“color”,”red”);
});

こちらの場合はli要素の数だけイベントが必要になります。イベントデリゲートを使うと1つのイベント処理で終わります。すると、処理の回数が減るので、ページの速度が上がります。SEO的にはデリゲートを使う方が有利になります。コードは以下のようになります。

$(“ul”).on(“click”,”li”,function(){
   $(this).css(“color”,”red”);
});

ulをセレクタに対してイベントを設定していますが、liを引数にいれることで、すべてのliにイベント処理を実行します。

data

dataはイベント実行された際に、dataの中に設定したデータを格納し、処理の中で使えるようにできます。dataの記述方法は{ データ名: 値}という風に書きます。ダブルクォーテーションは必要ないので気をつけましょう。

function

functionはeventsが実行されたタイミングで処理を発生させるための引数です。多くの場合はfunction(){処理}で設定されます。function()の引数を設定することで、処理の中に引数のデータを使用することもできます。

onメソッドで使えるイベント

onメソッドでは様々なイベントに対して処理を設定できます。こちらではjQueryで設定できるイベントを紹介します。イベントを設定してみて動きを確認してみてください。あなたの作ろうとしているサイトに活用して下さい。

  • click:クリックされた時
  • load:ドキュメントが読み込まれた後
  • mousemove:マウスが要素内で動いているとき
  • submit:送信が実行されたとき
  • error:JavaScriptにエラーが発生したとき
  • keypress:キーボードが押されたとき

他にいろんなイベントがあります。下のサイトに一覧があるので、参考にして下さい。

jQuery 日本語リファレンス

コード例

コード例は画像をクリックすると2枚の画像が入れ替わります。クリックイベントを設定しています。適当な画像をsrcに設定して、動きを確認して、コードと動きのイメージをつなげてみてください。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .img2 {
      display: none;
    }
  </style>
  <body>
    <div>
      <p>画像をクリックしてください</p>
    </div>
    <img src="画像を設定してください" class="img1" />
    <img src="画像を設定してください" class="img2" />
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"
    ></script>
    <script>
      $("img").on("click", function () {
        $(".img1").toggle();
        $(".img2").toggle();
      });
    </script>
  </body>
</html>

まとめ

jQueryのonメソッドを使えばイベント処理を設定することができます。スマホやタブレットのような画面がPCよりも狭いデバイスが普及している中、イベント処理は不可欠です。ハンバーガーメニューは典型的な例だと思います。

できる限り、ページのサイズを小さくして、必要な情報のみを表示させることがユーザーにとっても使いやすいです。onメソッドはユーザーにとって情報を見やすく、探しやすくするには便利な機能になります。

ぜひ使い方を覚えて、サイトに活用してください。