jQueryでクリックイベントを実装する方法【現役エンジニアが解説】

PROGRAM

今回は、jQueryでクリックイベントを実装する方法について、簡単に解説していきます。

HTMLで書く

HTMLにイベント処理を書くことも可能です。

<button type="button" id="getButton" onclick="onGetButtonClick();">取得ボタン</button>

例えば、上記の例では、取得ボタンクリック時にonGetButtonClick関数を呼びます。

ただし、HTMLに埋め込まれるとメンテナンスしづらい面もあり、jQueryでイベントを設定する方が望ましいことが多いです。

onメソッドを使う

jQueryにはonメソッドが用意されています。

onメソッドでは、ある要素の特定のイベント発生時に処理を実行できます。

$('#getButton').on('click', function() {
  // クリック時の処理を書く
});

上記のコードでは、getButtonというidを持つ要素がクリックされると任意の処理を実行します。

clickメソッドを使う

jQueryにはclickメソッドもあります。

ただし、現在はonメソッドを使うことが推奨されています。

$('#getButton').click(function() {
  // クリック時の処理を書く
});

上記のコードの例では、getButtonのidの要素のクリック時に任意の処理を実行します。