jQuery でボタンクリックイベントを処理する

今日の記事では、jQuery のボタン click イベントについて学習します。

jQuery のハンドルボタン click イベント

jQuery には統合された .click() アプローチがあり、イベントハンドラーを JavaScript の click イベントにバインドするか、このイベントを要素にディスパッチします。

構文：

.click( handler )
.click( [eventData ], handler )

1. handler は、イベントがトリガーされるたびに実行される関数です。
2. eventData は、イベントハンドラーが超えるデータを含むオブジェクトです。

このメソッドは、最初の 2つのバリアントでは .on("click", handler ) の省略形であり、3 番目のバリアントでは .trigger( "click" ) の省略形です。click イベントは、マウスポインタが要素の上にあるときに要素に送信され、マウスボタンが押されて起動されます。

すべての HTML 要素がこのイベントを受け取ることができます。 .click() メソッドは .on("click", handler ) の省略形であるため、.off("click") で区切ることができます。

click イベントは、この一連のイベントの後にのみディスパッチされます。

1. マウスポインタが要素上にあるときにマウスボタンが押されます。
2. マウスポインタが要素の上にあるときにマウスボタンを離します。

これは通常、アクションを実行する前の望ましいシーケンスです。これが必要ない場合は、mousedown または mouseup イベントの方が適切な場合があります。

次の例でそれを理解しましょう：

<button id="btn">Hello World!</button>

$("#btn").click(() => {
  console.log("Click event fired")
});

上記の例では、button 要素を定義しました。click イベントがディスパッチされ、ボタンがクリックされるとすぐに関数が実行されます。

jQuery をサポートするブラウザで上記のコードスニペットを実行してみてください。以下の結果が表示されます。

出力：

Click event fired

こちらのデモをご覧ください。