• HOME > 
  • JavaScript > 
  • jQueryのクリックイベントの使い方【click()とon...

jQueryのクリックイベントの使い方【click()とon()の違い】

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像
広告
広告

クリックイベントとは?

ある要素がクリックされた時に特定の処理が実行されるようにすることをクリックイベントと呼びます。

表示非表示を切り替えるボタンなどWEBサイトやWEBサービスではクリックと連動させた機能が多く用いられます。

jQueryでクリックイベントを作成するには、以下の2通りの方法が存在します。

  • click()メソッドを使う方法
  • on()メソッドを使う方法

click()はまさにクリックイベントを作るために存在するメソッドです。on()メソッドはクリック以外にも、ページの読み込みやウィンドウサイズの変更、マウスホバーなどをきっかけにした処理を設定することが可能です。

clickとonの違い

両者の最大の違いは、Javascriptの処理によって後から追加したHTML要素に対してクリックイベントを設定することができるかという点です。

click()メソッドは後から追加した要素にはクリックイベントを設定することはできません。一方on()メソッドを使えば後から追加した要素に対してもクリックイベントを設定することが可能です。

クリックイベントにはon()メソッドを使うことが推奨されている

追加した要素への処理はもちろん、クリック以外のイベントの作成にも対応できることから、現在ではon()メソッドを使うことが推奨されています。

click()メソッドの使い方

クリックイベントにはon()メソッドが推奨されていますが、click()メソッドの使い方についても触れておきます。

click()メソッドは、以下のようにして記述して設定します。

click()の書き方

次の例では、ボタンをクリックするとtoggleClassメソッドの処理によってボタン自体の背景色が変更されます。

HTML

<button>ボタン</button>

CSS

button.active{
    background:#dd4000 !important;
    transition: linear .5s;
}

jQuery

$(function(){
    $("button").click(function(){
        $(this).toggleClass("active");
    });
});

プレビュー

リンク先のサムネイル
jQueryで要素の表示・非表示を操作する方法

jQueryを使えばユーザーのアクションに応じて要素を表示させたり、非表示にしたりできます。jQueryのhide()やshow()メソッド、toggle()メソッド、fadeIn()やfadeOut()メソッドを用いて表示非表示を切り替える方法を説明します...【もっと読む】

リンク先のサムネイル
jQueryでCSSを操作する方法

jQueryでCSSを操作するには、「css()メソッドを使って要素のCSSのプロパティとその値を直接操作する」と「addClass()とremoveClass()メソッド要素にクラス名を追加・削除する」という2つの方法があります...【もっと読む】

clickメソッドは後から追加した要素には使えない

具体的にどのような状況でclick()メソッドが使えなくなるかを説明します。

下の例ではボタンをクリックすると新しいボタンが追加されていきますが、追加されたボタンはクリックしても背景色が切り替わりません。

HTML

<button>ボタン</button>

CSS

button.active{
    background:#dd4000 !important;
    transition: linear .5s;
}

jQuery

$(function(){
    $("button").click(function(){
        $(this).toggleClass("active");
        $(this).after("<button>追加ボタン</button>");
    });
});

プレビュー

on()メソッドを使う方法

クリックイベントの作成に推奨されているon()メソッドも書き方はほとんど一緒です。

on()メソッドは次のように記述してクリックイベントを設定します。

on()メソッドの書き方

なお、on()メソッドはクリック以外にもページの読み込みやウィンドウのサイズ変更など様々なきっかけでイベントを設定できます。

その場合はセレクターを「window」にし、clickを「load」(読み込み)や「resize」(サイズ変更)にします。

次の例では先程のclick()メソッドの例と同じように、ボタンをクリックするとtoggleClassによってボタン自体の背景色が切り替わります。

HTML

<button>ボタン</button>

CSS

button.active{
    background:#dd4000 !important;
    transition: linear .5s;
}

jQuery

$(function(){
    $("button").on("click",function(){
        $(this).toggleClass("active");
    });
});

プレビュー

後から追加した要素にクリックイベントを設定する

on()メソッドであればjQueryの操作によって後から追加した要素に対してもクリックイベントが設定できると説明しましたが、上記の記述方法ではクリックイベントが設定できません。

後から追加した要素にon()メソッドを使ってクリックイベントを設定するには以下のように記述します。

後から追加した要素の時の書き方

次の例では、先程clickメソッドではできなかった後から追加したボタンをクリックしたときの処理ができるようになっています。

HTML

<button>ボタン</button>

CSS

button.active{
    background:#dd4000 !important;
    transition: linear .5s;
}

jQuery

$(function(){
    $(document).on("click","button",function(){
        $(this).toggleClass("active");
        $(this).after("<button>追加ボタン</button>");
    });
});

プレビュー

まとめ

今回説明したクリックイベントをはじめ、ユーザーの操作に応じた処理は最近のWEBサイトには欠かせません。 組み合わせて使うことで様々な処理が実現できますので是非使ってみましょう。

広告
広告

関連する記事

サムネイル

JavaScriptで偶数と奇数を判定する方法【テーブルの行……

2024年05月16日
ある数値が偶数か奇数かは、「数値を2で割って余りが0なら偶数」「数値を2で割って余りが0でなければ奇数」という方法で判別を行います。
サムネイル

JSで郵便番号検索を実装できるライブラリ【yubinbang……

2024年04月12日
yubinbango.jsは郵便番号検索(郵便番号を打ち込むと住所が自動入力される)機能を簡単に実装できるのライブラリです。一実装方法がとても簡単なのでメールフォームなどに手軽に郵便番号検索機能を導入したい方におすすめです。
サムネイル

JSで特定の位置までスクロールされたら要素を固定する方法【s……

2024年04月12日
CSSのstickyのような動きをJSで実装する JavaScriptを使って、「ある要素がページ上部に当たるまでスクロールされたら、その位置でその要素を固定表 […]
サムネイル

JSで日付を表示するならtoLocaleDateString……

2024年03月15日
toLocaleDateStringは日付のフォーマットを少ないコードで簡潔に行えるメソッドです。20XX年X月X日というような年月日表示はもちろん、曜日の取得や西暦と和暦の変換まで即座に行ってくれます
サムネイル

JSで自動かな入力補完を実装できるライブラリ【jquery.……

2024年03月15日
jquery.autokana.jsは入力された日本語テキストのふりがな(フリガナ)を自動的に別の欄に入力してくれるJQueryのライブラリです。
サムネイル

JSでページ離脱時にメッセージを出す方法【beforeunl……

2024年03月15日
JavaScriptのイベントであるbeforeunloadを使えばページを離脱する前にメッセージを出して注意を促すことができます。
サムネイル

Javascriptのlightboxライブラリの使い方【画……

2023年10月01日
最終更新日:2023年09月12日
lightboxライブラリでできること Webサイトでは、ユーザーがクリックすると大きい画像が開くという表示方法が良く用いられます。 一覧では小さい画像を並べて […]