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

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

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

イベントの設定にはonメソッドを使います。本記事では、jQueryでonメソッドを使ってイベントを設定する方法を紹介します。特にクリックやスクロールといったイベントに対して様々な処理を行います。サイトを訪れたユーザーの目を引くのに有効です。

本記事では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 イベント一覧

ここではonで使うイベントの代表を紹介しています。よく使うものを抜粋しているので参考にしてください。

イベント名コード
clickクリックされたとき
dbclickダブルクリックされたとき
mousedown要素上でマウスが押されたとき
mouseup要素上でマウスが押され、上がったとき
scrollスクロールされたとき
resize画面（ウィンドウ）のサイズが変わったとき
loadロードされたとき
submitフォームが送信されたとき
errorエラーが発生したとき(JavaScript)
mouseenterマウスが要素に入ったとき
mouseleaveマウスが要素から外れたとき

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：キーボードが押されたとき

コード例

コード例は画像をクリックすると２枚の画像が入れ替わります。クリックイベントを設定しています。適当な画像を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"></script>
    <script>
      $('img').on('click', function () {
        $('.img1').toggle();
        $('.img2').toggle();
      });
    </script>
  </body>
</html>

onイベントの使い方

セレクタの部分にはイベントの起点となるタグやクラス、id、documentやwindowといったオブジェクトを指定します。onの後には第一引数として、イベントを入れます。クリックするイベントだとしたら、”click”と入れます。

第二引数にはfunction()を入れます。その後、中括弧{ }内に入るのが処理内容です。第二引数はオブジェクトデータやデリゲートを使うときにはfunction()以外が入り、第三引数以降にfunction()を入れることがあります。

詳しくは下の「onイベントの使い方」で解説します。

複数イベントを設定する

複数のイベントに対して同じ処理をする場合は、イベントとイベントの間にスペースを入れます。例えば、クリックとダブルクリックで同じセレクタに対して同じ処理をする場合に使います。例は以下の通りです。

$('button').on('mouseenter mouseleave ', function () {
  console.log('OK');
});

mouseenterとmouseleaveの間にはスペースが入っています。上のコードの場合、buttonの中に入ったり、出たりするとコンソールに「OK」と表示されます。

オブジェクトデータを渡す

第二引数にオブジェクトにデータを設定することで、処理の中でオブジェクトを使うことができます。例は以下の通りです。

$('button').on('click', { name: 'WORLD' }, function (e) {
  console.log('HELLO ' + e.data.name);
});

buttonを押すとコンソール上に「HELLO WORLD」と表示されます。第二引数にnameというオブジェクトを用意し、WORLDというデータを用意します。functionにはイベントを示すeを引数として渡します。

処理の中の「e.data.name」でイベントが発生した時にnameオブジェクトのデータを呼び出します。function()で使うことは少なく、処理外のところに関数を用意し、関数を呼び出すことがほとんどです。

デリゲートを使ったイベントの設定

デリゲートとはイベントが発生した要素と別の要素がイベント処理をすることです。例として下のコードを見てください。

<body>
  <div>
    <p>クリックされていません</p>
    <p>クリックされていません</p>
    <p>クリックされていません</p>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script>
    $('div').on('click', 'p', function () {
      $(this).text('クリックされました');
    });
  </script>
</body>

通常であれば$(“p”).on(“click”,function(){～})と書きます。その方がコードも短いしシンプルだと感じたのではないでしょうか。しかし、$(‘p’)だと3つのpに対してイベント処理が発生しています。

一方、例に挙げたコードでは対象要素をdivにすることでイベント処理が登録されているのは1つだけです、引数にpを置くことで、p全てにイベント処理を実行することができます。また、pに後から別のイベントを追加することも可能です。

まとめ

jQueryでonメソッドを用いたイベントの設定方法を解説しました。

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

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

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