jQueryのon()イベントの使い方｜クリック・動的要素・解除を初心者向けに解説

jQueryのon()でクリック処理を書きたいのに、引数の順番や、後から追加した要素へイベントを効かせる方法が分からないことがありますよね。

on()は「どのイベントが起きたときに、どの処理を実行するか」を要素へ登録するメソッドです。クリックだけでなく、入力、フォーム送信、キーボード操作などにも使えます。

この記事では、on('click', 処理)の基本から、イベントオブジェクト、複数イベント、動的要素に必要なイベントデリゲーション、off()による解除まで解説します。

jQueryのon()イベントの基本構文

最も基本的な書き方は、対象要素を選び、on()の第1引数へイベント名、第2引数へ実行する関数を渡す形です。

jQuery(function ($) {
  $('.button').on('click', function () {
    console.log('ボタンがクリックされました');
  });
});

clickがイベント名、function () { ... }がイベント発生時に呼ばれる関数です。イベント名にonは付けず、'onclick'ではなく'click'と書きます。

on(‘click’)でクリック処理を作る

ボタンを押すたびに回数を増やす例で、on()の動きを確認します。まず、ボタンと結果表示用の要素をindex.htmlへ用意してください。

<button id="count-button" type="button">クリックする</button>
<p>クリック回数：<strong id="count">0</strong>回</p>

次に、jQuery本体を読み込んだ後のscript.jsへイベント処理を追加します。

jQuery(function ($) {
  let count = 0;

  $('#count-button').on('click', function () {
    count += 1;
    $('#count').text(count);
  });
});

let count = 0で回数を保存し、クリックのたびに1を加えています。text(count)は、更新した値を画面へ表示する処理です。

画像ではボタンを2回押しているため、クリック回数が2回になっています。押すたびに同じ関数が呼び出され、表示が更新されます。

on()でよく使うイベント一覧

スマートフォンにはマウスのホバーがないため、重要な操作をmouseenterだけに任せないようにします。タップやキーボードでも使えるclickを基本にすると安全です。

eventオブジェクトで発生情報を受け取る

イベント処理の関数は、引数でイベントオブジェクトを受け取れます。どの要素で発生したか、押されたキーは何かなど、イベントに関する情報が入っています。

jQuery(function ($) {
  $('.button').on('click', function (event) {
    console.log(event.type);          // click
    console.log(event.currentTarget); // イベントを設定した要素
    console.log(event.target);        // 実際にクリックされた要素
  });
});

ボタンの中にアイコンなどの子要素があると、event.targetはその子要素になることがあります。イベントを設定したボタン自体を取得したい場合は、event.currentTargetまたは関数内のthisを使います。

preventDefault()でリンクやフォームの既定動作を止める

リンクのページ移動やフォーム送信を一度止め、入力確認などの処理を行いたい場合はevent.preventDefault()を使います。

<a id="confirm-link" href="https://example.com/">リンクを確認</a>
<p id="result">クリック待ち</p>

jQuery(function ($) {
  $('#confirm-link').on('click', function (event) {
    event.preventDefault();
    $('#result').text('ページ移動を防ぎました');
  });
});

画像ではリンクをクリックしてもページを移動せず、代わりにメッセージを表示しています。フォーム送信で使う場合は、入力チェック後に必要な送信処理を行ってください。

複数のイベントをまとめて設定する

同じ処理を複数イベントで実行する場合は、イベント名を半角スペースで区切ります。

jQuery(function ($) {
  $('.card').on('mouseenter mouseleave', function () {
    $(this).toggleClass('is-active');
  });
});

イベントごとに別の処理をしたい場合は、イベント名と関数をオブジェクトにまとめる書き方もできます。

jQuery(function ($) {
  $('.input').on({
    focus: function () {
      $(this).addClass('is-focus');
    },
    blur: function () {
      $(this).removeClass('is-focus');
    }
  });
});

動的要素にはイベントデリゲーションを使う

ページ表示後にappend()などで追加した要素には、追加前に直接設定したイベントがありません。この場合は、最初から存在する親要素へイベントを設定します。

<ul id="item-list">
  <li>既存の項目</li>
</ul>
<button id="add-button" type="button">項目を追加</button>
<p id="delegate-result">項目を選択してください</p>

jQuery(function ($) {
  $('#item-list').on('click', 'li', function () {
    $(this).addClass('is-selected').siblings().removeClass('is-selected');
    $('#delegate-result').text($(this).text() + 'を選択しました');
  });

  $('#add-button').on('click', function () {
    $('#item-list').append('<li>後から追加した項目</li>');
  });
});

on('click', 'li', 関数)の第2引数が、実際に反応させたい子要素のセレクターです。クリックは親要素まで伝わるため、親が受け取ってliから発生したクリックだけを処理します。

画像では「後から追加した項目」を追加した後、その項目をクリックしています。ページ表示時には存在しなかった要素でも、親へ設定したイベントが反応しています。

off()でonイベントを解除する

登録したイベントを不要になった時点で解除するにはoff()を使います。大きな画面の一部だけを初期化し直す場合など、同じイベントを重複登録しないためにも役立ちます。

function handleClick() {
  console.log('クリックされました');
}

$('.button').on('click', handleClick);

// 同じ関数を指定して解除する
$('.button').off('click', handleClick);

イベント名に名前空間を付ける

同じ要素に複数のクリック処理がある場合は、click.menuのような名前空間を付けると、自分が登録した処理だけを解除しやすくなります。

$('.menu-button').on('click.menu', function () {
  $('.menu').toggleClass('is-open');
});

// menu名前空間のイベントだけを解除
$('.menu-button').off('.menu');

1回だけ実行するならone()

初回クリックだけに反応させたい場合は、on()ではなくone()を使うと、1回実行した後に自動で解除されます。

$('.start-button').one('click', function () {
  console.log('初回だけ実行されます');
});

onイベントが動かないときの確認ポイント

• jQuery本体より後にscript.jsを読み込んでいるか
• classの前にはドット、idの前には#を付けているか
• イベント名を'onclick'ではなく'click'と書いているか
• 後から追加した要素にはイベントデリゲーションを使っているか
• 初期化処理のたびに同じイベントを重複登録していないか

クリックイベントだけを詳しく確認したい場合は、動的要素やアコーディオンの例も扱う次の記事が参考になります。

入力欄やセレクトボックスの値が変わったときの発火タイミングは、次の記事でフォーム別に解説しています。

まとめ

• on('イベント名', 関数)でイベント処理を登録する
• リンクやフォームの既定動作はpreventDefault()で止める
• 動的要素には親要素を使ったイベントデリゲーションを設定する
• 不要なイベントはoff()で解除する
• 1回だけ実行するならone()を使う

まずはボタンのclickイベントから試し、後から追加する要素があるときにイベントデリゲーションへ進むと理解しやすいです。