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

2024-02-17 01:03 JavaScript ボタン クリックイベント
  1. インラインイベントハンドラ: HTML要素のonclick属性を使用して、ボタンのクリック時に直接JavaScriptコードを実行することができます。
<button onclick="myFunction()">クリック</button>
<script>
function myFunction() {
  // クリック時の処理をここに記述します
}
</script>
  1. 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でボタンのクリックイベントを処理するための一般的な方法です。必要に応じて、コードをカスタマイズして使用してください。