jQueryのon()メソッドとは？初心者向け使い方ガイド

jQueryのon()メソッドは、要素にイベントハンドラを登録（アタッチ）するための手段です。セレクターで指定できる要素は、ページ上のあらゆるものが対象になります。最も一般的な使い方はボタンにクリックハンドラを設定することですが、実際にはon()を使えば、任意のイベントを任意の選択された要素に紐付けることが可能です。

このガイドでは、on()の基本構文を解説し、実用的なサンプルコードもいくつか紹介します。なお、jQueryのon()には省略可能な引数も存在しますが、本記事では必須の引数と一般的な使い方に絞って説明します。省略可能な引数について詳しく知りたい方は、公式ドキュメントをご参照ください。

jQueryのon()メソッドとは

jQueryのon()メソッドは、選択した要素に対して安定した方法でイベントハンドラを登録する仕組みです。イベント名を指定した後、on()にはコールバック関数を渡します。コールバック関数とは、メソッドに渡され、後から実行される関数のことです。今回の目的においては、このコールバック関数の中に「何かが起こる処理」を記述することになります。

たとえば、ボタンにクリックイベントハンドラをon()で登録したとしましょう。ボタンがクリックされた後に実行したいアクションは、このコールバック関数の中で定義します。

on()の基本構文

on()の動作イメージがつかめたところで、具体的な構文を見ていきましょう。jQueryでは、まず対象となる要素を選択します。そのうえでon()メソッドを呼び出してイベントハンドラを登録します。on()に渡す最初の引数はイベント名そのもの、続いてコールバック関数を指定します。

$('.btn').on('click', function() {
  alert("You clicked the button!")
})

ここでは、ボタンを選択し、on()を呼び出して必要な引数を渡しています。イベント名は必ずクォーテーションで囲む必要がある点に注意してください。コールバック関数の中では、メッセージ付きのアラートを表示しており、これによりコールバック関数が正しく動作していることを確認できます。

jQuery on()の実用例

次に、上記のボタンの例を発展させてみましょう。基本的な構文の使い方はすでに理解できたので、今度はクリック後にアラートを表示する以上のことを試してみます。

アラートの代わりに、ボタンがクリックされた後に新しいコンテンツを表示できます。そのために、コールバック関数内でjQueryのappend()メソッドを使用します。jQueryのappend()は、引数として渡されたコンテンツを選択した要素の末尾に追加するメソッドです。

まず、HTMLボタンと、新しいコンテンツを追加するための<div>をレンダリングします。

<button class="btn">
Click me!
</button>

<div class="message">

</div>

現時点では、ボタンだけが表示されます。

これがクリックされるのを待っているボタンです！次に、jQueryでこのボタンを選択し、クリックされた後にメッセージを表示させましょう。

$('.btn').on('click', function() {
  $('.message').append('The button has been clicked.')
})

ボタンはクラス名で選択され、クリックイベントハンドラが渡されています。コールバック関数内では、「message」というクラス名を持つ<div>にメッセージを追加しています。

on()メソッドが正常に機能しました！ここでappend()を使う際に注意したいのは、ボタンがクリックされるたびにメッセージが<div>の末尾へ追加されていくという点です。次は、少し異なる例を見てみましょう。

次の例では、ボタンがクリックされた後に、そのボタン自体を新しいコンテンツへ置き換えます。これにより、より制御されたユーザー体験を実現できます。

<div>
<button class="btn">
Click me!
</button>
</div>

ここでは、ボタンを<div>で囲んでいます。これにより、jQueryのhtml()メソッドを使って、ボタンをテキスト入りの<p>タグに置き換えることができます。「ユーザーにはボタンを一度だけクリックしてほしい」というケースは、Web開発ではよくあるシチュエーションですね！

$('.btn').on('click', function() {
  $('div').html('<p>The button has been replaced</p>')
})

先ほどの例と同様に、ボタンを選択してon()でクリックハンドラを登録します。コールバック関数内では、ボタンのHTMLを、新しいコンテンツを含む段落要素へと置き換えています。

ボタンがクリックされると：

新しいコンテンツが表示され、ボタンは消えました！これは、ユーザー体験をより制御された形で導くための堅牢な手法です。

まとめ

この記事では、jQueryのon()メソッドを使えば、わずか数行のコードで要素にイベントハンドラを登録できることを確認しました。基本構文を学んだ後、on()の具体的な使用例を2つ紹介しました。目的に応じて、特定の用途にも汎用的な用途にも柔軟に対応できる、非常に便利なメソッドです。

本ガイドはjQueryのon()の入門編ですので、ぜひ実際に手を動かして練習してみてください。イベントハンドラのマスターへの道のりには、まだまだ発見待ちの活用法がたくさんあります！