【javascript】addEventListenerイベントまとめ

はじめに

JavaScriptのevent(マウスクリックやブラウザを開いた時など)指定した関数を呼び出すことがよくありイベント処理を実現する仕組みするため、addEventListener()が用意されています。
使えない（IE対応できない、一部実装状況不明）場合もありますがほとんどのブラウザが対応できるイベントをまとめてみました。

目次

1.eventの種類
2.addEventListener()使い方
3.function他の書き方

eventの種類

イベント種類	内容	ドキュメント
click	マウスがクリックされた場合	参考
keydown	キーボードが押された場合	参考
keyup	キーボードが離された場合	参考
mousedown	マウスボタンが押された場合	参考
mouseup	マウスボタンが離された場合	参考
mousemove	マウスカーソルが移動した場合	参考
mouseover	マウスカーソルがオブジェクトに重なった場合	参考
mouseout	マウスカーソルがオブジェクトから離れた場合	参考
onLoad	ページが読み込まれた場合	参考
onUnload	他のページに移動する場合	参考
focus	選択された状態になった場合	参考
blur	フォーカスを失った場合	参考
submit	フォームがサブミットされた場合	参考
reset	フォームがリセットされた場合	参考
change	フォームの内容が変更された場合	参考
resize	ウインドウがリサイズされた場合	参考
abort	イメージの読み込みが中断された場合	参考
error	読み込みが失敗した場合	参考
load	Webページの読み込みが完了した時に発動（画像などのリソースすべて含む）	参考

addEventListener()使い方

直で書いても分けて書いても両方同じ結果です。

<button id="btn">表示</button>
<script>
//直で書く
//ボタンの要素習得
const btn = document.getElementById("btn");
//要素がクリックされたら
btn.addEventListener('click', function(){
  console.log('クリックされたよ👍')
});

//functionを呼び出しする書き方
btn.addEventListener("click", btnEventfunction);
function btnEventfunction() {
  console.log('クリックされたよ👍');
}
</script>

HTMLのID要素をは取得して要素にaddEventListener()が実行しています。何かアクションがある場合functionが発火されコンソールローグが出力されます。

function他の書き方

ECMAScript6からArrow function(矢印関数)でfunction省略して書くこともできます。

const btn = document.getElementById("btn");

btn.addEventListener('click', () => {
  console.log('クリックされたよ👍');
});

e（何でもできそう）をつけてイベントのオブジェクトも習得することもできます。

const btn = document.getElementById("btn");

btn.addEventListener('click', function(e) {
  console.log('クリックされたよ👍');
});

const btn = document.getElementById("btn");
btn.addEventListener('click', (e) => {
  console.log('クリックされたよ👍');
});

btn.addEventListener('click', e =>  {
  console.log('クリックされたよ👍');
});

以上です。