[JavaScript] [jQuery] jQueryを利用して、ボタンやリンクがクリックされたタイミングで処理をする

このページのタグ:[JavaScript] [jQuery]
jQueryを利用して、ボタンやリンクがクリックされたタイミングで処理をするコードを紹介します。

概要

jQueryを利用してクリックイベントを処理するには、セレクタでオブジェクトを取得し、オブジェクトのonメソッドを呼び出し、”click”を第一引数に与え、イベントを設定します。

書式

(セレクタ).on('click',イベント実行関数);
または
(セレクタ).on('click',function(){
  ...クリック時に実行する処理
});
もしくは、
(セレクタ).click(イベント実行関数)
または
(セレクタ).click(function(){
  ...クリック時に実行する処理
 });
と記述します。

プログラム

コード

下記のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>

  <meta charset="utf-8" />
  <script type="text/javascript" src="jquery-2.2.1.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      $("div.button").on('click', function () {
        alert("Button枠がクリックされました");
      });
    });
  </script>
</head>
<body>
  <div class="button" style="border:solid 1px #0094ff; background-color:#e1e1e1;">ボタンのつもり</div>
  <br/>
  <div class="button" style="border:solid 1px #0094ff; background-color:#e1e1e1;">ボタンのつもり</div>
  <br />
  <div class="button" style="border:solid 1px #0094ff; background-color:#e1e1e1;">ボタンのつもり</div>
  <br />

</body>
</html>

解説

イベントハンドラの付与はDOMツリーが構築後の必要があるため、コードはreadyイベントとして実装します。今回の例では"div.button"をセレクタとして利用しており、divタグの"button"クラスのオブジェクトを選択しています。選択したオブジェクトに対し、onメソッドでイベントハンドラを割り当てます。onメソッドの第一引数に"click"を与えることで、クリックイベントのハンドラを割り当てています。イベントハンドラではalertダイアログを表示し、クリックされた旨のメッセージを表示します。

表示結果

上記のHTMLファイルをWebブラウザで表示します。


[ボタンのつもり]の枠をクリックします。アラートダイアログが表示され、JavaScriptが実行されたことが確認できます。


セレクタで"div.button"を指定しているため、3つの[ボタンのつもり]枠いずれもクリックで処理が実行されます。

別の実装

先の例では、onメソッドを利用して実装しましたが、click()メソッドを利用する実装もあります

コード

下記のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <meta charset="utf-8" />
  <script type="text/javascript" src="jquery-2.2.1.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      $("div.button").click(function () {
        alert("Button枠がクリックされました");
      })
    })
  </script>
</head>
<body>
  <div class="button" style="border:solid 1px #0094ff; background-color:#e1e1e1;">ボタンのつもり</div>
  <br/>
  <div class="button" style="border:solid 1px #0094ff; background-color:#e1e1e1;">ボタンのつもり</div>
  <br />
  <div class="button" style="border:solid 1px #0094ff; background-color:#e1e1e1;">ボタンのつもり</div>
  <br />

</body>
</html>

解説

先のコードでは、onメソッドを利用し、第一引数に"click"を与え、第二引数にイベントハンドラの関数を与えることでクリックイベントを実装しました。今回の例では、clickメソッドを利用し、第一引数にイベントハンドラの関数を与えることでクリックイベントを実現できます。

IDを指定したクリックイベントの実装

IDで指定した要素に対するクリックイベントを実装するコードを紹介します。また、InputタグのButtonに対してクリックイベントを実装します。

コード

下記のコードを記述します。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
  <script type="text/javascript" src="jquery-2.2.1.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      $("#button01").on('click', function () {
        alert("ボタン1がクリックされました。");
      });
    })
  </script>

</head>
<body>
  <input id="button01" type="button" value="ボタン1"/>
  <input id="button02" type="button" value="ボタン2" />
  <input id="button03" type="button" value="ボタン3" />
</body>
</html>

解説

jQueryセレクタの先頭に"#"を記述することで、指定したIDを持つ要素を選択できます。上記のコード例では"button01"のIDを持つ要素を選択できます。クリックイベントでは、alertダイアログを表示し、クリックされた旨のメッセージを表示します。

表示結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。


画面の[ボタン1]をクリックすると、下図のアラートダイアログが表示されます。


また、[ボタン2]や[ボタン3]をクリックした場合は、アラートダイアログは表示されます。[ボタン1]のid="button10"の要素のみクリックイベントが適用されていることが確認できます。


プライバシー    iPentecについて
iPentec all rights reserverd. (ISDC)