JavaScriptでボタンクリックイベントを処理する方法

2024-02-10 00:07 JavaScript ボタンクリック イベント処理
  1. HTML内でイベントハンドラを直接指定する方法: HTMLのボタン要素にonclick属性を追加し、JavaScriptの関数を指定します。
<button onclick="myFunction()">クリック</button>
<script>
function myFunction() {
  // ここにボタンクリック時に実行したいコードを記述します
}
</script>
  1. JavaScriptのaddEventListenerメソッドを使用する方法: JavaScriptのaddEventListenerメソッドを使用して、ボタン要素にイベントリスナーを追加します。
<button id="myButton">クリック</button>
<script>
document.getElementById("myButton").addEventListener("click", myFunction);
function myFunction() {
  // ここにボタンクリック時に実行したいコードを記述します
}
</script>
  1. jQueryを使用する方法: jQueryを使用して、ボタンクリックイベントを処理することもできます。
<button id="myButton">クリック</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$("#myButton").click(function() {
  // ここにボタンクリック時に実行したいコードを記述します
});
</script>

これらはいくつかの一般的な方法ですが、JavaScriptでボタンクリックイベントを処理するためのさまざまなアプローチがあります。必要に応じて、上記のコード例を参考にしてください。