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</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が以下のようになっているとします。

button1
button2

<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が以下のようになっているとします。

button1

<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</button>

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

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

システム
エンジニア

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

プロジェクト
マネージャー

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

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

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

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