ボタン押下の処理に addEventListener

javascript

JavaScriptでボタンが押された（クリックされた）時に処理（複数可）の実行

　addEventListenerメソッドを使用し、clickイベントを監視。対象のボタン要素を取得。　addEventListener('click', 関数)の形式で記述。複数処理の追加も可能。 

基本のクリックイベント実装例：　ボタンをクリックした際にコンソールへメッセージ表示。

<!-- HTML -->
<button id="myButton">クリック</button>

<script>
  // 1. ボタン要素を取得
  const button = document.getElementById('myButton');

  // 2. addEventListenerでクリックイベントを設定
  button.addEventListener('click', function() {
    alert('ボタンが押されました！');
  });
</script>

addEventListenerの解説　

'click' (第1引数): 監視するイベントの種類を指定します。クリック時はclickを使用します。

  • 関数 (第2引数): クリック時に実行される処理（イベントハンドラ）を記述します。
  • 特徴: onclickプロパティと異なり、同じイベントに対して複数のイベントリスナーを登録できます。 

応用的な使い方

  • アロー関数を使用する: より短く記述できます。javascriptbutton.addEventListener('click', () => console.log('Click!'));
  • 一度だけ実行する: オプションでonce: trueを指定すると、一度クリックされた後は処理が実行されなくなります。javascriptbutton.addEventListener('click', () => { console.log('最初で最後のクリック'); }, { once: true });
  • イベントオブジェクトを取得する: 第1引数に関数を渡すことで、クリックされた要素の情報やマウス座標などを取得できます。javascriptbutton.addEventListener('click', (event) => { console.log(event.target); // クリックされたボタン要素自体 });  

コメント