JavaScript

レシピ

イベント

クリックしたときに処理を実行する

特定の要素をクリックしたら指定した処理を実行する方法について解説します。

この記事のポイント

  • 特定のHTML要素がクリックされたら処理を実行するように設定
  • スマホやタブレットなどのタッチ端末のタップへも対応

目次

HTML要素がクリックされたら処理を実行する

ページにある特定のHTML要素がクリックされたら指定した処理を実行するようには、HTML要素に対してイベントリスナー「click」と処理する内容を指定します。

ボタンをクリックすると...
ボタンをクリックすると…
指定した処理を実行する
指定した処理を実行する

コードは次のようになります。

コード例

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>GRAYCODE JavaScript</title>
	<script>
		window.addEventListener('load', function(){

			document.getElementById("button1").addEventListener('click', function(){
				alert("Hello");
			});
		});
	</script>
</head>
<body>
<h1>JavaScriptレシピ</h1>
<button id="button1">クリック!</button>
</body>
</html>

上記のコードではid属性button1」を持つ<button id=”button1″>クリック!</button>に対し、addEventListenerメソッドでクリックのイベントリスナーと処理内容を設定しています。

今回のようにfunction(){〜}の無名関数の形式で処理内容を書く以外にも、次のようにメソッド名を指定することもできます。

コード例

window.addEventListener('load', function(){
  document.getElementById("button1").addEventListener('click', sayHello);
});

function sayHello() {
  alert("Hello");
}

パソコンなどマウスを使う場合はクリックに反応しますが、スマホやタブレットなどのタッチ端末ではタップに反応します。

タップにも反応する

イベントリスナーを1回のみ設定する

イベントリスナーは何回クリックしても有効ですが、オプション設定で処理を1回だけにすることが可能です。
指定方法は以下のように配列形式で、イベントリスナーの第3引数に指定します。

コード例

window.addEventListener('load', function(){

  var option = {
    once: true
  };
  document.getElementById("button1").addEventListener('click', sayHello, option);
});

function sayHello() {
  alert("Hello");
}

このコードを実行すると、ボタンは1回目のクリックには反応しますが2回目以降は反応しません。

oncetrueにすると、1回のみ反応する指定にすることができます。
初期値はfalseで何回でも反応するようになっています。

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。