JavaScript イベント処理 メモ

イベント処理とは

• ユーザーの行動に合わせてDOM操作を行う
  • フォームを送信する
  • ボタンをクリックする
  • など

イベント処理の作り方

JavaScript.js

HTML要素.addEventListener('イベント種類',()=>{
    イベント処理
});

イベント種類

イベントの種類	処理の実行タイミング
click	マウスボタンを押して話した時
scroll	画面をスクロールした時
など

例

JavaScript.js

//outputと指定しているidを持つHTML要素を取得し定数に入れる
const btn = document.getElementbyId('output');

//outputとid指定しているボタンをクリックする際のイベント処理
btn.addEventListener('click',()=>{
    console.log(ボタンがクリックされました);
});