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を使用するより短く書けるようになっている。省略ができる為、コードの見通しをよくするという利点がある。