jQuery Web制作

【jQuery】クリックイベントのon(click)の使い方をサンプル付きで解説

※ 当サイトではアフィリエイト広告を利用しています

jQueryでクリックしたらボタンの色を変えたり出来る?

ボタンなどをクリックして要素の色などを変化させることをクリックイベントと呼びます。

今回はそのクリックイベントをjQueryを使って実装する方法を解説していきます。

今回はjQueryを使うので、jQueryを使ったことがない人はこちらの記事を参照下さい。

あわせて読みたい
【初心者向け】jQueryとは?CDNを使った本体の読み込み方についても分かりやすく解説
【初心者向け】jQueryとは?CDNを使った本体の読み込み方も分かりやすく解説

続きを見る

 

完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
  • 30日間でWeb制作を学べる
  • 完全無料
  • 現役エンジニアへの質問無制限
  • オンラインの動画学習なので時間場所を問わず勉強可能
  • 最大4回の学習サポート面談
  • 受付は1日25名までの先着制
無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。
いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

\ 完全無料 /

ZeroPlus Gate公式サイト

先着1日25名まで!

jQueryのクリックイベントclick()とon("click")の違い

これからクリックイベントの書き方を解説しますが、クリックイベントには2つの書き方があります。

まずはその違いから解説していきますが、先に結果を書くとこちらになります。

click()on("click")
後から追加した要素にイベント処理は不可後から追加した要素にイベント処理が可能
clickメソッドは複数のイベント処理は不可onメソッドは複数のイベント処理が可能

上記のようにclick()で出来ないことがon("click")では出来るので、基本的にはon("click")を使うようにしましょう。

 

click()とon("click")の共通点

シンプルなクリックイベントであれば、どちらを使っても同じ結果になります。

例えばこちらはclick()を使った基本的な書き方です。

$(function () {
  // ボタンがクリックされたときの処理
  $("セレクタ").click(function () {
    // クリックされた時の処理
  });
});

そして今回はこちらのコードでサンプルを作ってみます。

<button>ボタン</button>
$(function () {
  // ボタンがクリックされたときの処理
  $("button").click(function () {
    alert("ボタンがクリックされました");
  });
});

こちらがサンプルです。

See the Pen
Untitled
by junpei (@junpei-sugiyama)
on CodePen.

ボタンをクリックすると画面上にアラートが表示されます。

同様にon("click")の基本的な書き方はこちらです。

$(function () {
  // ボタンがクリックされたときの処理
  $("セレクタ").on("click", function () {
    // クリックされた時の処理
  });
});

そして今回はこちらのコードでサンプルを作ってみます。

$(function () {
  // ボタンがクリックされたときの処理
  $("button").on("click", function () {
    alert("ボタンがクリックされました");
  });
});

サンプルはこちらです。

See the Pen
Untitled
by junpei (@junpei-sugiyama)
on CodePen.

こちらもボタンをクリックすると画面上にアラートが表示され、click()と同じ結果になりました。

 

click()は後から追加した要素にイベントは効かない

まずはon("click")の場合を見てみます。

コードはこちらです。

<div>
  <button>ボタン①</button>
</div>
$(function () {
  // ボタンがクリックされたときの処理
  $("div").on("click", "button", function () {
    alert("buttonがクリックされました");
  });

  // 新しいボタンを <div> に追加
  $("div").append("<button>ボタン②</button>");
});

これはdivタグ内のbuttonをクリックすると『buttonがクリックされました』というアラートが画面上に表示されます。

そしてポイントはHTMLではボタンは1つですが、jQueryの後半でボタンを1つ追加していて、そのボタンもクリックイベントの対象になっているということです。

つまりボタン1と2のどちらをクリックしてもアラートが表示されます。

サンプルはこちらです。

See the Pen
Untitled
by junpei (@junpei-sugiyama)
on CodePen.

そして今度はclick()の方を見てます。

HTMLは同じで、jQueryはこちらです。

$(function () {
  // ボタンがクリックされたときの処理
  $("button").click(function() {
    alert("buttonがクリックされました");
  });

  // 新しいボタンを <div> に追加
  $("div").append("<button>ボタン②</button>");
});

3行目が変わっています。

先ほどは『divタグ内のbutton』でしたが、今回は『button』だけです。

そして先ほどと同じようにボタンを追加しているので、これもクリックイベントの対象になっていそうですが、なっていません。

サンプルはこちらです。

See the Pen
Untitled
by junpei (@junpei-sugiyama)
on CodePen.

ボタン①をクリックすればアラートは表示されますが、ボタン②は表示されません。

このようにclick()の方は後から追加した要素にイベントは効きません。

 

clickメソッドはクリックイベントのみ

clickメソッドはその名の通りクリックイベントしか使えませんが、onメソッドは複数のイベントに使えます。

on("click")はその中のクリックイベントになります。

なのでclick()on("click")の違いではありませんが、clickメソッドとonメソッドの違いはそれになります。

例えばonメソッドの場合は、マウスカーソルが移動した時の処理であるmousemoveなども使えます。

$(function () {
  // ボタン要素上でマウスが移動したときの処理
  $("button").on({
    mousemove: function () {
      alert("ボタン上で移動されました");
    },
  });
});

サンプルはこちら。

See the Pen
Untitled
by junpei (@junpei-sugiyama)
on CodePen.

ボタンの上にマウスカーソルを乗せるとアラートが表示されます。



jQueryのクリックイベントon("click")の使い方

ここまででjQueryのクリックイベントではon("click")を使った方がいいというのが分かったと思います。

ほとんど使い方も解説したような感じですが、実際にどんなことが出来るのかよく使うものをご紹介します。

コードは左上のHTML・CSS・JSをクリックすれば確認できます。

 

CSSを書き換える

これはよく使うと思いますが、今回は文字色や背景色を変えてみます。

まずはボタンをクリックしてBOXの文字色を変えてみます。

See the Pen
Untitled
by junpei (@junpei-sugiyama)
on CodePen.

次は背景色を変えてみます。

See the Pen
Untitled
by junpei (@junpei-sugiyama)
on CodePen.

それぞれコードはこちらです。

$(function () {
  // ボタンがクリックされたときの処理
  $("button").on("click", function () {
    // 指定した要素の文字色を変更
    $(".box").css("color", "red");
  });
});
$(function () {
  // ボタンがクリックされたときの処理
  $("button").on("click", function () {
    // 指定した要素の背景色を変更
    $(".box").css("background-color", "tomato");
  });
});

 

CSSを複数書き換える

今度は文字色と背景色を両方変えてみます。

See the Pen
Untitled
by junpei (@junpei-sugiyama)
on CodePen.

コードはこちらです。

$(function () {
  // ボタンがクリックされたときの処理
  $("button").on("click", function () {
    // 指定した要素の背景色を変更
    $(".box").css("background-color", "tomato");
    // 指定した要素の文字色を変更
    $(".box").css("color", "white");
  });
});

 

クラスを付与

これもよく使うと思いますが、CSSをjQueryで書き換えるのではなく、CSSで指定しておいてそのクラスをjQueryで付与するという方法です。

例えばコードはこちらです。

<button>ボタン</button>
<div class="box">BOX</div>
.red {
  background-color: tomato;
}
$(function () {
  // ボタンがクリックされたときの処理
  $("button").on("click", function () {
    // 指定した要素にクラスを付与
    $(".box").addClass('red');
  });
});

BOXには最初.boxというクラスしかありませんが、ボタンをクリックすると.redというクラスが付与され、そしてCSSで.redに設定していたbackground-colorが適用されます。

サンプルはこちら。

See the Pen
Untitled
by junpei (@junpei-sugiyama)
on CodePen.

見た目はjQueryでCSSを書き換えた時と同じですね。

 

同じ要素に複数のクリックイベント

今回はボタンをクリック、もしくはボタンからマウスカーソルを外した時にBOXの背景色を変えてみます。

clickmouseoutの2つのクリックイベントを同時にします。

まずはボタンクリックで確認して、次に右下のRerunをクリックしてリセットしてから、ボタンにマウスカーソルを乗せてから外してみて下さい。

See the Pen
Untitled
by junpei (@junpei-sugiyama)
on CodePen.

どちらも背景色は変わったと思います。

コードはこちらです。

$(function () {
  // ボタンがクリックされたときの処理
  $("button").on("click mouseout", function () {
    // 指定した要素の文字色を変更
    $(".box").css("background-color", "tomato");
  });
});

clickmouseoutを半角スペースで区切っています。

 

複数の要素に同じクリックイベント

ボタン①とボタン②のどちらをクリックしてもBOXの背景色が変わるようにします。

See the Pen
Untitled
by junpei (@junpei-sugiyama)
on CodePen.

右下のRerunをクリックすればリセットされます。

コードはこちらです。

$(function () {
  // ボタンがクリックされたときの処理
  $(".button01, .button02").on("click", function () {
    // 指定した要素の背景色を変更
    $(".box").css("background-color", "tomato");
  });
});

まとめ

今回はjQueryのclick()とon("click")の違いや書き方について解説してきました。

今回は『クリックしてイベントを発火させる』という内容だったので、イベントやメソッドまでは網羅していませんがこれが基本となります。

ぜひこれを活用してCSSだけでは出来ない実装を試してみて下さい。

以上になります。

 

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

-jQuery, Web制作