はじめに
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()使い方
直で書いても分けて書いても両方同じ結果です。
.html
<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省略して書くこともできます。
.js
const btn = document.getElementById("btn");
btn.addEventListener('click', () => {
console.log('クリックされたよ👍');
});
e（何でもできそう）をつけてイベントのオブジェクトも習得することもできます。
.js
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('クリックされたよ👍');
});
以上です。