MENU
  1. ホーム
  2. プログラミング言語
  3. JavaScript
  4. Javascript学習
  5. 【jQuery入門】on()によるイベント処理の使い方まとめ！

【jQuery入門】on()によるイベント処理の使い方まとめ！

Javascript学習
侍エンジニア編集部

こんにちは、ライターのマサトです！

今回は、jQueryでさまざまなイベント処理を簡単に記述できる「on()」メソッドについて学習をしていきましょう！

この記事では、

  • 「on()」とは？
  • 「on()」の使い方
  • 「on()」の活用
  • 「on()」と「click()」の違い
  • 「on()」でhover()を実現する方法
  • 「on()」と「off()」の使い方

などの基本的な内容から、応用的な使い方に関しても解説していきます。この記事で、「on()」メソッドをしっかり学習して自分のスキルアップを目指しましょう！

目次

「on()」とは？

それでは、まず最初に「on()」メソッドについての基本的な知識を学習していきましょう。「on()」は、さまざまなイベント処理を記述するために使われるメソッドになります。

ところで、さまざまなイベント処理とはどのようなものでしょうか？例えば、次のようなイベントが考えられます！

  • マウス操作（クリック、ホバー、移動など）が行われた時
  • キーボードから何か入力された時
  • フォームが送信された時
  • 任意のフォーム要素にフォーカスされた時
  • 画面がスクロールされた時
  • etc…

このように、何らかのイベントが発生した時に特定の処理を行いたい場合に「on()」メソッドは活躍してくれるのです。本記事では、「on()」の基本的な使い方から応用例まで詳しく解説していきますのでぜひ参考にしてみてください！

「on()」の使い方

この章では、「on()」を使った基本的な使い方について見ていきましょう。一般的な構文から利用できるイベント一覧、実際のプログラミング手法について学んでいきます。

基本的な構文と書き方について

まずは、「on()」メソッドの基本となる構文から見ていきましょう。「on()」は、対象となる要素にイベント名や関数を指定することで簡単にイベント処理を実現することができます。

一般的な構文としては次の通りです！

対象要素.on( イベント名, セレクタ, データ ,関数 )

「イベント名」には、例えばクリックイベントなら「click」という文字列を指定するだけなので簡単です。「セレクタ」は、対象要素内でさらに指定したセレクタからのイベントだけを確認するように設定できます。

「データ」は、任意のデータを渡したい時に値を設定することができます。「関数」には、イベント発生時に実行したい処理を記述するのが一般的です。

主なイベント一覧

「on()」を使ったイベント処理にはどのような種類があるのか一覧表にして見てみましょう！

主なイベントは次の通りです！

イベント名 内容
change フォーム部品の状態に何らかの変化があった時に発動
click 要素がクリックされた時に発動
blur / focus 要素にフォーカスが当たったとき(focus)、外れたとき(blur)に発動
load ドキュメントが読み込まれたあとに発動
resize ウィンドウサイズが変化した時に発動
scroll 画面がスクロールした時に発動
keyup / keypress キーボードのキーが押された時(keypress)、離された時(keyup)に発動
mouseup / mousedown マウスのボタンが押された時(mousedown)、離された時(mouseup)に発動
mousemove 指定の要素内でマウスが動いている時に発動
submit フォームが送信された時に発動
error 何らかのJavaScriptエラーが発生した時に発動

この表にある「イベント名」の部分をon()の引数に指定することで、それぞれのイベント処理を実装することができます。また、「on()」は同じ要素に複数のイベントを追加していくことができるのも特徴なのでお覚えておきましょう！

基本的なclickイベント処理の方法

ここからは、「on()」メソッドを使って実際にプログラミングする方法を学習していきましょう！

「on()」の記述方法としては、「対象要素.on( イベント名, 関数 )」のように引数へ「イベント名」と処理を記述する「関数」を指定します。

次のサンプル例を見てください！

<body>
<button>ボタン</button>

<script>
    $('button').on('click', function() {
    
        console.log('クリックされました！');
    
    })
</script>
</body>

実行結果

クリックされました！

この例では、ボタン要素を配置してクリックするとイベント処理が実行されるようにしています。そのため、ボタン要素を対象にして「on(‘click’, function() {})」のように記述します。

今回は、クリック操作のイベント処理なのでイベント名は「click」になります。あとは、関数内に実行したい処理を記述することで動作するわけです。

「on()」の活用

この章では、「on()」のさらなる便利な活用方法について見ていきましょう。主に、複数イベントの登録方法、データ渡し、デリゲートについて学んでいきます。

複数イベントの扱い方

まずは、「on()」を使って複数のイベントを登録する方法について見ていきましょう。例えば、クリック操作だけでなくボタン要素にマウスが近づいただけでもイベントを実行できるようにしてみましょう！

次のサンプル例を見てください！

<body>
    <button>ボタン</button>

    <script>
        $('button').on('click mouseenter', function() {
            console.log('クリックされました！');
        })
    </script>
</body>

「on()」メソッドの引数に注目してください。ボタン要素にマウスが侵入してきた時点でイベントを実行するには「mouseenter」を使います。そのため、「on(‘click mouseenter’, 関数)」のように記述することで、2つのイベントを同時に実行することが出来るわけです。

これにより、マウスが近づいてもクリックしてもコンソールログにメッセージが出力されるようになります。

イベントにオブジェクトデータを渡す方法

「on()」メソッドの引数にはオブジェクト形式のデータを指定することも可能です。このデータは、関数に渡すことが可能なので任意のデータを活用した処理ができるようになるので便利です。

次のサンプル例を見てください！

<body>
    <button id="one">ボタン１</button>
    <button id="two">ボタン２</button>

    <script>
        $('#one').on('click', {name: '太郎'}, showText);
        $('#two').on('click', {name: '花子'}, showText);

        function showText( e ) {
            console.log( e.data.name + 'さん、こんにちは！' );
        }
    </script>
</body>

実行結果

 ※「ボタン１」をクリックした例
太郎さん、こんにちは！

※「ボタン２」をクリックした例
花子さん、こんにちは！

この例では、2つのボタン要素を配置しています。それぞれのボタンごとにon()を使ってイベント処理を実装していますね。on()の引数にオブジェクト形式のデータを指定しており、それぞれ「name」の値に異なる名前を設定しています。

このデータにアクセスするには、「e.data.プロパティ名」のように記述すること実現します。そこで、「e.data.name」と記述すれば、それぞれのボタンをクリックした時に設定されている名前が表示されるというわけです！

デリゲートを使ったイベント登録の方法

最後に、「デリゲート」について解説をしておきます。「デリゲート」は、簡単に言うとイベントが発生した要素が別の要素にイベント処理を任せてしまうことができる機能になります。

このデリゲートを活用することで、イベント登録のリソースが少なくなり効率の良いプログラミングを書けるようになります。例えば、次のサンプル例を見てください！

<body>
<ul>
    <li>リスト１</li>
    <li>リスト２</li>
    <li>リスト３</li>
</ul>

<script>
    $('li').on('click', function() {
        console.log('クリック');
    })
</script>
</body>

この例では「リスト要素」が配置されており、それぞれの「li要素」にイベント処理が登録されていますね。on()を使って「li要素」をクリックすることで、コンソールログにテキストを出力します。この場合だと、対象要素を「$(‘li’)」としているので3つの「li要素」にイベントがそれぞれ登録されていることになります。

つまり、イベント処理が3つ存在します。（当然ですが、li要素が増えればその分も増えます）しかし、デリゲートを使うとイベント処理はたった1つだけで済むのです。（li要素が増えても関係ありません）

次のサンプル例を見てください！

<body>
<ul>
    <li>リスト１</li>
    <li>リスト２</li>
    <li>リスト３</li>
</ul>

<script>
    $('ul').on('click', 'li', function() {
        console.log('クリック');
    })
</script>
</body>

注目すべきは「on()」の記述方法です。まず、対象要素を「li」の親要素である「ul」にします。そして「on(‘click’, ‘li’, function() {}」のように、引数へ「li」を指定すればすべてのli要素にイベント処理が実行されるわけです。

これがデリゲートの基本です。このように記述すれば、イベント処理が登録されているのは「ul」に1つだけですが、すべてのli要素にイベント処理を実行することが出来るわけです。

また、あとから「li要素」を動的に追加したとしても、しっかりとイベント処理が実行されるという特徴もあるので便利です！

「on()」と「click()」の違い

jQueryには「on()」のクリックイベントを簡易的に記述できる「click()」メソッドがあります。当然ですが「click()」はクリックイベントしか検出できないのに対して、「on()」はあらゆるイベント処理を記述できます。

しかしながら、他にも大きく違う点が1つあります。それは、jQueryで途中から追加されたHTML要素を検出できるかどうか？…という点にあります。

次のサンプル例を見てください！

<body>
<div>
    <button>ボタン１</button>
</div>

<script>
    $('button').click(function() {
        console.log('click');
    })

    $('div').append('<button>ボタン２</button>');
</script>
</body>

この例では、div要素内に単純なボタンが配置されています。そこで、「click()」を使ってボタンイベント処理を記述していますよね？

注目すべきはそのあとに「append()」を使ってもう1つボタン要素を追加している点です。このように途中でHTML要素を追加した場合、「click()」のイベント処理は動作しないわけです。つまり、「ボタン１」は動作するけど「ボタン２」は動作しないということになります。

次に「on()」の場合を見てみましょう！

<body>
<div>
    <button>ボタン１</button>
</div>

<script>
    $('button').on('click', function() {
        console.log('on');
    })

    $('div').append('<button>ボタン２</button>');
</script>
</body>

この例は、先ほどの「click()」を「on()」に変更しただけです。実は、この書き方だと「on()」の場合も「click()」同様に「ボタン２」は動作しません。

「on() / click()」のイベント処理は、最初から存在しているHTML要素と紐づく特性があるからです。そのため対象要素を「button」にしていると、最初から存在する「ボタン１」だけにイベント処理が紐づくわけです。

しかし、「on()」の場合は次のように記述すると「ボタン１ / ボタン２」どちらも動作させることが可能です！

$('div').on('click', 'button', function() {
    console.log('on');
})

$('div').append('<button>ボタン２</button>');

最初から存在している「div」を対象にして、on()の引数に「button要素」を指定します。このように記述することで、あとから追加された「button要素」も問題なく動作させることができるのです。

これは「click()」だと実現できない点なので、忘れないようにしておきましょう！

「on()」でhover()を実現する方法

jQueryには、マウスカーソルが特定の要素と「重なった」「重なってない」を判断できる「hover()」メソッドがあります。これにより、マウスオーバーのイベント処理ができるわけですが、これを「on()」を使って同じことを実現してみましょう！

「on()」は引数に{ }を使い、複数のイベント処理を記述することができるので、この性質を活用すれば簡単です。

次のサンプル例を見てください！

<body>
<button>ボタン</button>

<script>
    $('button').on({
        'mouseenter': function() {

            console.log('マウスが入ってきた');

        },
        'mouseleave': function() {

            console.log('マウスが出ていった');

        }
    })
</script>
</body>

この例では、1つのボタン要素が配置されています。このボタン要素にマウスオーパーすると、イベントが実行されるように処理を記述しています。具体的には、{ }内に「mouseenter」「mouseleave」という2つのイベント処理を記述しています。

「mouseenter」は特定の要素内にカーソルが入った時に実行され、「mouseleave」は逆に出ていった時に実行されるわけです。これにより、例えばドロップダウンメニューなども実現することができますね。

「on()」と「off()」の使い方

この章では、「on()」で登録したイベント処理を「off()」で削除する方法について見ていきましょう。主に、「off()」の基本的な使い方と実際のプログラミング手法について学んでいきます！

「off()」によるイベントを削除する方法

まずは、「off()」を使ったイベント処理の削除方法から見ていきましょう。「on()」でイベントを登録して「off()」でイベントを解除するというように、「on() / off()」はペアでよく使われます。

記述方法としては、【 対象要素.off( イベント名 ) 】のように引数へ削除したいイベント名を記述します。引数は省略できますが、その場合すべてのイベント処理が削除されてしまうので、通常は特定のイベント名を記述するのが推奨されています。

次のサンプル例を見てください！

<body>
    <button>ボタン</button>

    <script>
      $('button').on('click', function() {
          console.log('クリックされました');
      })

      $('button').off('click');
    </script>
</body>

この例では、ボタン要素にクリックイベントを登録しています。そのボタンを対象にして「off(‘click’)」と記述することで、クリックイベントが削除されるわけです。ちなみに、「off()」の基本から応用技までを次の記事で体系的にまとめているので、ぜひ参考にしてみてください！

【jQuery入門】off()によるイベント削除の方法まとめ！
更新日：2024年5月6日

名前空間を設定した削除の方法

「on()」メソッドには、「名前空間」と呼ばれるオプション機能があります。これは、イベント名に任意の名前を付けることで区別することが出来るようになる機能になります。

具体的な例として次のサンプルを見てください！

<body>
<button>ボタン</button>

<script>
    $('button').click(function() {
        console.log('clickによるイベント処理');
    })
    $('button').on('click', function() {
        console.log('onによるイベント処理');
    })

    $('button').off('click');
</script>
</body>

この例では、1つのボタン要素に対して「click()」と「on()」それぞれのイベントが登録されています。そして、「off(‘click’)」とすることですべてのクリックイベントが削除されていますね。これにより、ボタンをクリックしても何も動作はしなくなります。

しかし、名前空間を利用することで「on()」のイベントだけを削除することが可能になるのです！

次のサンプル例を見てください！

<body>
<button>ボタン</button>

<script>
    $('button').click(function() {
        console.log('clickによるイベント処理');
    })
    $('button').on('click.sample', function() {
        console.log('onによるイベント処理');
    })

    $('button').off('click.sample');
</script>
</body>

実行結果

clickによるイベント処理

注目すべきは、「on()」で設定しているイベント名です。通常なら「click」と記述するところを「click.sample」というように任意の名前を付与していますよね？

これにより、「off(‘click.sample’)」というカタチでon()メソッドのクリックイベントだけを削除できるわけです。実行結果を見ると、click()メソッドのイベントだけが動作しているのが分かりますね。

まとめ

今回は、jQueryでイベント処理を簡単に処理できる「on()」メソッドについて学習をしました！

最後に、もう一度おさらいをしておきましょう！

  • on()メソッドはイベント処理を関数内に記述することができる
  • 複数のイベント登録やデータ渡しを行うことも可能
  • on()とclick()の違いは、後から追加した要素を検出できるかどうかの違い
  • 複数のイベント処理を1つのon()メソッドで記述できる
  • 名前空間を使うと特定のイベントだけを削除できる
  • デリゲートを使うとイベント処理のリソースを効率化できる

上記内容を踏まえて、ぜひ自分のプログラミングにも活用できるように頑張っていきましょう！

Javascript学習
jQuery on

この記事を書いた人

侍エンジニア編集部のアバター 侍エンジニア編集部

【プロフィール】
DX認定取得事業者に選定されている株式会社SAMURAIのマーケティング・コミュニケーション部が運営。「質の高いIT教育を、すべての人に」をミッションに、IT・プログラミングを学び始めた初学者の方に向け記事を執筆。
累計指導者数4万5,000名以上のプログラミングスクール「侍エンジニア」、累計登録者数1万8,000人以上のオンライン学習サービス「侍テラコヤ」で扱う教材開発のノウハウ、2013年の創業から運営で得た知見に基づき、記事の執筆だけでなく編集・監修も担当しています。
【専門分野】
IT/Web開発/AI・ロボット開発/インフラ開発/ゲーム開発/AI/Webデザイン

この著者の記事一覧へ
目次