Javascriptの、イベント・イベントハンドラ・関数との紐付けについて学習した。
同じ事を何回も調べたり、理解が難しかったりした部分を記録しておく。

イベントとは

ユーザーが何かの操作をしたことを知らせるJavaScriptの機能。

ボタンをクリックすると画面をスクロールしてトップに戻る
ボタンを押すと、ポップアップが表示される
画像が時間経過で変わる

などなど、webサイトでよく見る機能はJavaScriptを使えば実装できる。

イベントハンドラとは

イベントが発生したときに実行する関数を関連付ける方法。
on + イベント名という形になっている。

イベントハンドラ	説明
onclick	クリックされたとき
onchange	内容が変更されたとき
ondbclick	ダブルクリックされたとき
ondrag	ドラッグされたとき
onkeypress	キーボードのキーが押されたとき
onload	ページが読み込まれたとき
onmouseover	マウスカーソルが上に置かれたとき
onsubmit	フォームが送信されたとき
onscroll	スクロールされたとき
onselect	テキストなどが選択されたとき

イベントハンドラの登録方法

DOMプロパティを使用してイベントハンドラを登録する。
HTMLより要素を取得して、要素.イベントハンドラの形で、イベントハンドラを要素に対して登録する。

btn.html

<!--ボタンの作成-->
<input type="button" value="button" id="btn"> 
<!--JavaScriptファイルを参照する-->
<script src="btn.js"></script>
</body>

btn.js

//HTMLから要素を取得し、変数に代入する
const button = document.getElementById('btn');
//ボタン要素をクリックした時に関数を呼び出し実行する
button.onclick = function() {
  console.log('clicked');
};

調べてみたところ、addEventListenerを使用して以下の書き方も可能とのこと。

btn.js(こっちの書き方でもOK)

//HTMLから要素を取得し、変数に代入する
const button = document.getElementById('btn');
//ボタン要素をクリックした時に関数を呼び出し実行する
button.addEventListener('click', function() {
  console.log('clicked');
});

基本的には要素.addEventListener('イベントの種類', 関数)と書く。
上記のコードでは、第2引数にそのまま無名関数を記述している。
無名関数はたくさんの書き方があり、ややこしく感じたので以下にまとめておく。

const fnA = (x) => { /* 仮引数が1つのみのとき */ };
const fnB = x => { /* 仮引数が1つのみのときは()を省略可能 */ };
const fnC = () => { /* 仮引数がないとき 何もない時は()省略できない*/ };
const fnD = (x, y) => { /* 仮引数が複数のとき */ };

以下は、先ほどaddEventListenerを使用して書いたコードと同じ意味になる。

btn.js

//HTMLから要素を取得し、変数に代入する
const button = document.getElementById('btn');
//ボタン要素をクリックした時に関数を呼び出し実行する
button.addEventListener('click', () => {
  console.log('clicked');
});

=>を使用したものはアロー関数という。functionを使用するより短く書けるようになっている。省略ができる為、コードの見通しをよくするという利点がある。

JavaScript イベントと関数について

イベントとは

イベントハンドラとは

イベントハンドラの登録方法