ywork2020.com

Title

要素にクリックイベントを登録する

目次 (INDEX)

clickとは

ここで説明するclick とは次の語句からなるjQueryのメソッドです。
click
読み: クリック
意味: マウスのボタンを押す操作

目次に戻る

clickメソッドの概要

このメソッドは、セレクタに該当する既存要素にクリックイベントをバインドします。 また、メソッドの引数を空にした場合には既にバインドされているクリックイベントを呼び出します。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。 

Selector.click(Handler(EventObject));
Selector.click([EventData], Handler(EventObject));
Selector.click();
  • 01: クリックイベントが発生した時点でハンドラーが実行されます。
  • 02: ハンドラーの引数であるイベントオブジェクトにデータを添付して実行します。
  • 03: セレクタにバインドしているクリックイベントを呼び出します。

目次に戻る

サンプルコードと実行結果

このサンプルではclickメソッドの全構文の記法を取り入れています。

サンプルの内容はボタンがクリックされると、識別子idAnswerの要素の背景色をランダムに変更すると同時に テキストにクリック回数を表示させる仕様です。

サンプルコード: HTML 
<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	<p><output id="idAnswer">innerText</output></p>
	<p><input id="idButtonA" type="button" value="Random BGColor A"></p>
	<p><input id="idButtonB" type="button" value="Random BGColor B"></p>
</body>
  • 05: output要素 (idAnswer: この要素の背景色とテキストが変更されます。)
  • 06: input要素button型 (idButtonA: クリックするとscriptの06行～14行が実行されます。)
  • 07: input要素button型 (idButtonB: クリックするとidButtonAのクリックイベントを実行します。)
サンプルコード: script 
<script>
	let numR = 255;
	let numG = 255;
	let numB = 255;
	let numCount = 0;
	$("#idButtonA").click({multiplier : 255},function(event){
		numR = Math.round(Math.random()*event.data.multiplier);
		numG = Math.round(Math.random()*event.data.multiplier);
		numB = Math.round(Math.random()*event.data.multiplier);
		$("#idAnswer")
			.css("background-color","rgb("+numR+","+numG+","+numB+")")
			.text(++numCount+event.type)
		;
	});
	$("#idButtonB").click(function(){
		$("#idButtonA").click()
	});
</script>
  • 02-04: 変数の定義 (11行目のrgb関数の引数に利用します。)
  • 05: 変数の定義 (12行目のクリック回数のカウントに利用します。)
  • 06-14: clickメソッドと関数 (idButtonAにclickイベントをバインドして関数を定義します。)
  • 15-17: clickメソッドと関数 (idButtonBにclickイベントをバインドして関数を定義します。)
  • 16: clickメソッド (idButtonAのclickイベント呼び出します。)
実行結果:

答え: id="idAnswer"
innerText

主実行: id="idButtonA"

副実行: id="idButtonB"

目次に戻る