.NETエンジニア・プログラマ向けの技術情報・業界ニュースをお届けします。

  1. FEnet.NETナビ
  2. .NETコラム
  3. プログラミング言語
  4. Javascript
  5. jQueryのonの使い方を解説!onを正しく使いこなそう

jQueryのonの使い方を解説!onを正しく使いこなそう

  • Javascript
  • jQuery
  • プログラミング言語
公開日時:   更新日時:
jQueryのonの使い方を解説!onを正しく使いこなそう
この記事でわかること
    基本情報技術者試験の試験対策はこちら>>

    システム
    エンジニア
    onメソッドとはどういった機能を持っているのでしょうか?

    プロジェクト
    マネージャー
    onメソッドとはユーザーのイベント処理を記述するためのメソッドです。ここではよく利用されるonメソッドについて見ていきましょう。

    jQueryのonとは?


    jQueryはJavaScriptで利用できる豊富な機能を持つライブラリです。そのjQueryのonメソッドは、ユーザ操作に関連した様々なイベント処理を行えるとても便利な機能です。今回はonメソッドについて解説しましょう。

    なおjQueryを実行するには、htmlファイルのheadタグ内で以下のようにjQueryのライブラリの設定が必要です。jQueryは定期的にバージョンアップされるので、最新かどうか常にチェックをしてください。

    <script src=”https://code.jquery.com/jquery-3.5.1.min.js”></script>

    ボタンのクリック処理

    jQueryのonの基本的な使い方を紹介しましょう。htmlに以下のようなボタンがあるとします。

    <button>button</button>

    以下のjQueryでボタンがクリックされた時にログを出力できます。$(document).readyはページ全体が読み込まれた時にfunctionの処理を行う、と言う意味です。documentや’button’の部分はセレクタと言い、ここに操作の対象を記述します。’click’はイベント名で、これでbuttonタグがクリックされた時にfunctionの中身を実行するという意味になります。

    $(document).ready(function(){
    $(‘button’).on(‘click’, function() {
    console.log(‘ボタンが押下されました。’);
    })
    });

    jQueryの記述とコンソールのログ出力について

    なおjQueryはscriptタグ内に記述します。長くなる場合はheadタグに以下のように記述して、別のjsファイルに分けましょう。

    <script type=”text/javascript” src=”script.js”></script>

    console.logの出力を見る方法は、Google Chromeの場合は該当するhtmlページが出ている時にF12キーを押して、DevToolsのConsoleタブを選択することで見られます。ログよりポップアップの方が良い人は、以下のようにしましょう。

    alert(‘ボタンが押下されました。’);

    複数のイベントの実行

    onメソッドは複数のイベントを記述することができます。jQueryの記述を以下のように変えてみましょう。

    $(document).ready(function(){
    $(‘button’).on(‘click keypress’, function() {
    console.log(‘ボタンが押下されました。’);
    })
    });

    onのイベントにkeypressが追加されています。これでボタンにフォーカスが当たっている時にキーを押すと、マウスクリックと同様にfunctionが実行されます。

    オブジェクトの指定

    onメソッドにはオブジェクトを指定することができます。オブジェクトとはJavaScriptで扱うデータの総称です。htmlが以下のようになっているとします。


    <button id=”b_1″>button1</button>
    <button id=”b_2″>button2</button>

    jQueryは以下のように記述します。

    $(document).ready(function(){
    $(‘#b_1’).on(‘click’, {number: ‘一番’}, dispLog);
    $(‘#b_2’).on(‘click’, {number: ‘二番’}, dispLog);

    function dispLog(obj) {
    console.log(obj.data.number + ‘が押下されました。’);
    }
    });

    オブジェクトを渡すonの説明

    ボタンにはそれぞれ異なるidが付いています。セレクタは$(‘#id名’)でタグのidを指定できます。今回のonではイベント名の次に{}で囲まれたオブジェクトを指定しています。numberがオブジェクトの名前で:の次がその値です。functionにはdispLogを指定し、クリックでこれが実行されます。

    dispLogにはオブジェクトが渡されていて、obj.data.numberでアクセスできます。このサンプルを実行してボタンをクリックすると、それぞれ違ったログが出力されます。

    一番が押下されました。
    二番が押下されました。

    onメソッドのデリゲート機能

    onメソッドのデリゲートと言う機能を説明します。htmlが以下のようになっているとします。

    • No.1
    • No.2
    • No.3

    <ul>
        <li>No.1</li>
        <li>No.2</li>
        <li>No.3</li>
    </ul>

    jQueryが以下のようになっていて、liタグのテキストがクリックされるとログが出力されます。

    $(document).ready(function(){
        $(‘li’).on(‘click’, function() {
            console.log(‘クリックされました。’);
        })
    });

    デリゲートでイベントを一か所にまとめられる

    上のjQueryでは3つのliタグにイベントが設定されます。これをその親のulタグに委譲(デリゲート)して、イベント発生個所を1つにすることができます。以下のように記述します。

    $(document).ready(function(){
    $(‘ul’).on(‘click’, ‘li’, function() {
    console.log(‘クリックされました。’);
    })
    });

    今回のサンプルではあまり役に立つように感じられませんが、次の項でデリゲートの活用例をお見せしましょう。

    appendメソッドの落とし穴

    htmlが以下のようになっているとします。

    <div>
    <button>button1</button>
    </div>

    jQueryを以下のように記述します。

    $(document).ready(function(){
    $(‘button’).on(‘click’, function() {
    console.log(‘ボタンが押下されました。’);
    })
    $(‘div’).append(‘<button>button2</button>’);
    });

    親タグにデリゲートすることで順番に左右されなくなる

    上のサンプルではappendというメソッドでボタンを後から追加しています。これを実行すると、button1をクリックするとログが出ますが、button2では出ません。onメソッドの後でappendしているので、反応しないのです。

    appendがonの前であれば反応しますが、そういった順番を考慮するのはjQueryの記述が増えてくると困難です。

    このようなケースでデリゲートが役立ちます。onメソッドの箇所を以下の様に変えましょう。

    $(‘div’).on(‘click’, ‘button’, function() {
    console.log(‘ボタンが押下されました。’);
    })

    これでbutton2のクリックでログが出るようになりました。buttonの親のタグのdivにイベント処理をデリゲートしたことで、順番に左右されなくなったのです。

    offでイベントを削除する

    offメソッドを使うとイベント発生を削除できます。htmlが以下のようになっているとして、

    <button>button</button>

    以下のjQueryを記述しても、ログは出ません。offメソッドですぐに削除されているからです。jQueryではイベントを止めたい時があるので、その場合に役立ちます。

    $(document).ready(function(){
    $(‘button’).on(‘click’, function() {
    console.log(‘ボタンが押下されました。’);
    })
    $(‘button’).off(‘click’);
    });

    システム
    エンジニア
    なるほど。デリゲートを利用してイベント処理を一回で済ませることも可能なんですね。

    プロジェクト
    マネージャー
    はい。ここでは基本のメソッドを見ていきました。他にも様々なイベントに対応したメソッドがありますので、試しながらマスターしていきましょう。

    onメソッドを駆使してjQueryを活用しよう

    jQueryのonメソッドを解説しましたがご理解頂けましたでしょうか。今回はほとんどマウスクリックのみでしたが、onメソッドは他にも様々なイベントに対応できます。

    是非こちらを活用してjQueryのコードを記述してください。

    FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
    株式会社オープンアップシステムロゴ

    株式会社オープンアップシステムはこんな会社です

    秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結!
    数多くのエンジニアが集まります。

    秋葉原オフィスイメージ
    • スマホアプリから業務系システムまで

      スマホアプリから業務系システムまで

      スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。

    • 充実した研修制度

      充実した研修制度

      毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。

    • 資格取得を応援

      資格取得を応援

      スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。

    • 東証プライム上場企業グループ

      東証プライム上場企業グループ

      オープンアップシステムは東証プライム上場「株式会社夢真ビーネックスグループ」のグループ企業です。

      安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

    株式会社オープンアップシステムに興味を持った方へ

    株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

    年収をアップしたい!スキルアップしたい!大手の上流案件にチャレンジしたい!
    まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

    株式会社オープンアップシステムへのご応募はこちら↓
    株式会社オープンアップシステムへのご応募はこちら↓

    新着案件New Job