はじめに
イベントについて学習したことを備忘録として残しています。
イベントの仕組み
ブラウザでは、リンクやクリックしたり、キーボードを操作したり、スクロールしたとき、ページを読み込もうとした時など、さまざまなタイミングでイベントが発生する
よく利用されるイベント
| イベント名 | 発生するタイミング | イベント名 | 発生するタイミング |
|---|---|---|---|
| load | スタイルシートや画像など、すべてのリソースの読み込みが完了したとき | dbclick | ダブルクリックされたとき |
| submit | フォームが送信されるとき | mousedown | マウスのボタンが押されたとき |
| reset | フォームがリセットされるとき | mouseup | マウスのボタンが離れたとき |
| resize | 画面のサイズが変わったとき | mouseover | マウスのカーソルが重なったとき |
| scroll | 画面がスクロールされたとき | select | テキストを選択したとき |
| copy | コピーされたとき | focus | 要素にフォーカスされたとき |
| paste | ペーストされたとき | blur | 要素のフォーカスがはずされたとき |
| keydown | キーが押されたとき | input | 入力されたとき |
| keyup | キーが離されたとき | change | 変化があったとき |
| click | クリックされたとき |
イベントの登録方法
- イベントとイベントハンドラを関連付ける
- 要素オブジェクトのonプロパティとして登録する方法
- addEventLisnerで登録する
1.イベントとイベントハンドラを関連付ける
オブジェクト名 onイベントの種類= () => {
//イベントハンドラ
};
例題
- ボタンをクリックするとコンソールに'clicked!'と出力する
<body>
<input id="button" type="button" value="Cliced!">
<script>
const e = document.getElementById('button');
e.onclick = () => {
console.log('clicked!')
};
</script>
2.ロードイベントを使う
ロードイベントとは、関連づけられた要素を読み終わったときに発生するイベント。
画像を含む、ページが完全に読み終わったことを検知して、何らかの処理を実行したいときに使用する
例題
- windowオブジェクトのloadイベントが発生したタイミングでコンソールに'load event!'と出力する
<body>
<script>
window.onload = () => {
console.log('load event!');
}
</script>
</body>
3.addEventLisnerで登録する
要素オブジェクト．addEventListener(‘イベントの種類’,関数名,false);
addEventListener()関数の引数には次の情報を指定します
- 第1引数：イベントの種類
- 第2引数：イベントハンドラとなる関数名
- 第3引数：false
イベントの種類の前には「on」は付けない。
例題
- ボタンをクリックするとコンソールに'clicked'と出力する
<body>
<input id="button" type="button" value="clicked!">
<script>
const e = document.getElementById('button');
e.addEventListener('click', () => {
console.log('clicked');
})
</script>
</body>
複数のイベントリスナーを登録する
同じターゲットの同じイベントに対して複数のイベントリスナーを登録したい場合はどうするのか？
HTMLの属性値やDOMで取得した要素のプロパティに対してのイベントハンドラ:イベントは1つしか登録できない
addEventListener メソッド:複数登録可能。登録されている順に複数のイベントリスナが呼び出される
イベントリスナーの解除
removeEventListenerメソッドを使用しイベントを削除する
target.removeEventListener(type, callback [, options])
削除するときも引数を指定する
コードの記述位置に対する注意点
要素のプロパティに対してイベントハンドラを登録したり、 addEventListener メソッドを使ってイベントリスナーを登録するための JavaScript のコードが、 HTML ページの中で対象の要素が記述されている位置よりも前にある場合にはエラーが発生する可能性あり。
ヘッダー部分で JavaScript のコードを読みこむ場合には注意が必要
注意したい関数の呼び出し方
通常は、関数を呼び出すために()をつける(基本構文)が、イベントと組み合わせる場合は関数名の後ろの()を付けずに関数を参照する。
理由
()をつけると即関数が実行されてしまう！！
イベントが発生した時に関数が実行されるようにするため
// 関数を単体で呼び出す場合
function myFunction() {
console.log("Hello!");
}
myFunction(); // 関数を呼び出すときに()を付ける
// イベントと組み合わせる場合
document.getElementById("myButton").addEventListener("click", myFunction);
おわりに
今回はイベントについて学習しました。