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

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

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

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

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

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の背景色を変えてみます。

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

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

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

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

コードはこちらです。

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

clickとmouseoutを半角スペースで区切っています。

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

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

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

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

コードはこちらです。

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