jQueryでクリックイベントを実装する方法【現役エンジニアが解説】
今回は、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の要素のクリック時に任意の処理を実行します。