【JavaScript】addEventListener()の主要イベントまとめ

はじめに

今回はaddEventListener()の主要なイベント一覧をまとめます！
addEventListener()はJavaScriptの頻出中の頻出なので何が使えるかくらいは頭の片隅に置いとくと良いかと思います！

そもそもaddEventListenerとは

あるイベントが実行された時に、メソッド内に書いてある一連の動作を実行するメソッドになります。
例えば、以下のようなhtmlファイルがあるとします。

test.html

<div id = 'btn'>ここをプッシュ！</div>

そして以下のjsファイルは、上記btnID内のテキストを、クリック時に変更するコードです。

test.js

  const btn = document.getElementById('btn');　//定数btnにhtmlのbtnIDの要素を取得

  btn.addEventListener('click', ()=>{　//定数btnがクリックされた時に
    btn.textContent = "あああ"; //btnIDの要素のテキストを"あああ"に変更
  });

addEventListenerの基本的な書き方は以下です。
他にも書き方はありますので、気になる方はぜひ調べてみてください！

test.js

対象要素.addEventListener(イベントの種類, function() {

  //イベント発火時の処理内容

});

イベントの種類

先ほどのclickのように、他にも様々なイベントがあります。
ここではよく使用するイベントをざっくりとまとめます。

イベントの種類	内容
click	マウスボタンをクリックした時に発火
mousedown	マウスボタンを押した時に発火
mouseup	マウスボタンを離したときに発火
mousemove	マウスカーソルが移動した時に発火
submmit	入力フォームのsubmitボタンを押したときに発火
scroll	画面がスクロールした時に発火
submmit	入力フォームのsubmitボタンを押したときに発火
scroll	画面がスクロールした時に発火

さいごに

上記は本当に基本的なイベントのみですが、調べるとかなりたくさん種類があります！
あらかじめこんなに用意してくれてるなんて親切すぎますね