.click()【《クリック》イベントハンドラ設定・実行】

メモ

構文

説明構文戻り値
《クリック》イベントハンドラ設定 .click( handler ) 1.0

handler：イベントハンドラ
引数説明
[ Event eventObject ]イベントオブジェクト
(this)該当要素 (HTML5：基本DOM要素 参照)
戻り値説明
false
その他 		.on()【イベントハンドラ設定】のイベントのバブルアップ・処理抑止 参照
処理続行

.on( "click", handler )の省略形 		jQuery
.click( [eventData ], handler ) 1.4.3

Anything eventData：イベントデータ
handler：イベントハンドラ
引数説明
[ Event eventObject ]イベントオブジェクト
(イベントデータは、eventObject.data で参照)
(this)該当要素 (HTML5：基本DOM要素 参照)
戻り値説明
false
その他 		.on()【イベントハンドラ設定】のイベントのバブルアップ・処理抑止 参照
処理続行

.on( "click", data, handler )の省略形 		jQuery
《クリック》イベントハンドラ実行 .click() 1.0

.trigger( "click" )の省略形 		jQuery

関連

例

《クリック》イベントハンドラ設定

<p>
  <button id="buttonClick11">[ buttonClick11 ]</button>
  <button id="buttonClick12">[ buttonClick12 ]</button>
  <button id="buttonClick13">[ buttonClick12 ]</button>
</p>
<p>
  <span id="outputClick1" style="border:1px black solid; padding:1px 5px;">【出力】</span>
</p>

<script>
$("#buttonClick11").click(function() {
  $("#outputClick1").text("[ " + this.id + " ] click");
});

$("#buttonClick12").click("DATA", function(eventObject) {
  $("#outputClick1").text("[ " + this.id + " ] click ( " + eventObject.data + " )");
});

$("#buttonClick13").click({ data1:"DATA1", data2:"DATA2" }, function(eventObject) {
  $("#outputClick1").text("[ " + this.id + " ] click ( " + eventObject.data.data1 + ", " + eventObject.data.data2 + " )");
});
</script>

【出力】

《クリック》イベントハンドラ実行

<p>
  <button id="buttonClick21">[ buttonClick21 ]</button>
  <button id="buttonClick22">[ buttonClick22 ]</button>
  <button id="buttonClick23">[ buttonClick23 ]</button>
</p>
<p>
  <span id="outputClick2" style="border:1px black solid; padding:1px 5px;">【出力】</span>
</p>

<script>
$("#buttonClick21").click(function() {
  $("#outputClick2").text("[ " + this.id + " ] click");
});

$("#buttonClick22").click(function() {
  $("#buttonClick21").click();
});

$("#buttonClick23").click(function() {
  $("#outputClick2").text("[ " + this.id + " ] click");
});
</script>

【出力】