イベントの概要
今までは、ブラウザでJavaScriptのコードを読み込まれたらすぐに処理が実行されていました。
JavaScriptのイベントでは、ユーザーやブラウザによって発生するアクション（例えば、ボタンのクリックやキーの押下、ページの読み込みなど）に応じて処理を実行することができます。
主なイベントの種類
マウスイベント
| イベントタイプ | 発生時 |
|---|---|
| click | 要素がクリックされたとき |
| mouseover | 要素にマウスポインターが重なったとき |
| mouseout | 要素からマウスポインターが離れたとき |
| mousemove | 要素上でマウスポインターが動いたとき |
キーボードイベント
| イベントタイプ | 発生時 |
|---|---|
| keydown | キーが押されたとき |
| keyup | キーが離されたとき |
フォームイベント
| イベントタイプ | 発生時 |
|---|---|
| submit | フォームが送信されたとき |
| change | フォームの入力値が変更されたとき |
| input | 入力フィールドにデータが入力されたとき |
ウィンドウイベント
| イベントタイプ | 発生時 |
|---|---|
| load | ページが完全に読み込まれたとき |
| resize | ウィンドウのサイズが変更されたとき |
| scroll | ページがスクロールされたとき |
イベントの登録
あるイベントが発生した時に実行する処理のことをイベント処理と言います。
addEventListener を使って、要素にイベントを登録する方法が一般的です。
これにより、特定のイベントが発生したときに指定した処理を実行できます。
基本構文
イベントターゲット要素.addEventListener('イベントタイプ', 関数);関数の部分は、無名関数または既存の関数を指定します。
イベントターゲット要素.addEventListener('イベントタイプ', function(){
// 指定したイベントタイプが行われる処理
});有名関数
今までは名前を持った関数（有名関数）を使っていました。
有名関数は定義を行い、改めて実行を行います。またコード内で使い回しができます。
function greet() {
console.log('Hello, world!');
}
greet(); // 「Hello, world!」と表示無名関数
無名関数は、その名前の通り、名前を持たない関数です。
関数の宣言や定義時に名前を付けずに使います。無名関数は、一度きりの関数としてよく利用されます。
イベントターゲット要素.addEventListener('イベントタイプ', function(){ // これが無名関数
// 指定したイベントタイプが行われる処理
});即時実行関数（IIFE）
無名関数を即時実行したい場合は、即時実行関数（IIFE）の形式にする必要があります。
無名関数を括弧で囲み、その直後に () を追加して関数を実行します。
(function() {
// 関数の処理
})();HTML、CSS、JavaScriptの基本的な読み込み順
HTML、CSS、JavaScriptの読み込み順とイベントの管理は、ウェブページのパフォーマンスや動作に大きく影響します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body>
<script src="script.js"></script> <!-- ここに記述する人もいる -->
</body>
</html>1 HTMLの読み込み
ウェブページが読み込まれる際、最初にブラウザはHTMLを一番上から順に読み込みます。
HTMLが読み込まれている間、ブラウザは順次タグに沿って要素を配置していきます。
2 CSSの読み込み
次に、HTML内でリンクされたCSSファイルが読み込まれます。CSSファイルの読み込みは、HTMLの読み込みと同時に行われます。
headタグ内に記述されたCSSがすべて読み込まれた後に、ブラウザはページの描画を行います。
3 JavaScriptの読み込み
最後に、JavaScriptが読み込まれます。
JavaScriptファイルを読み込んでいる間はHTMLの読み込みが止まります。
読み込み後に処理の実行が行われます。
なので必ず、headタグ内はCSS→JavaScriptの順で記述します。
defer属性を使った読み込み
deferをscriptタグに追加すると、HTMLの読み込みと並行してJSファイルガ読み込まれます。
HTMLの読み込みが完了した後、スクリプトが実行されます。
body閉じタグ直前に配置
古来からある方法で、 JavaScriptをbodyの末尾に記述することで、HTMLが完全に読み込まれた後にスクリプトが実行されます。
しかし、defer属性があるため現在はあまり使われません。
ウィンドウイベント
ウィンドウイベントは、ブラウザやページ全体に関連するイベントです。
これらのイベントは、ページの読み込み、サイズ変更、スクロールなど、ウィンドウに関する様々なアクションに対して反応します。
DOMContentLoaded
ページのHTML構造が完全に読み込まれた時点で発生します。
document.addEventListener('DOMContentLoaded', function() {
console.log('HTML構造が読み込まれました');
});load
ページやすべてのリソース（画像、CSS、JavaScriptファイルなど）が完全に読み込まれたときに発生します。
window.addEventListener('load', function() {
console.log('ページが完全に読み込まれました');
});resize
ブラウザのウィンドウサイズが変更されたときに発生します。
window.addEventListener('resize', function() {
console.log('ウィンドウのサイズが変更されました');
});scroll
ページがスクロールされたときに発生します。
ページのスクロール位置に応じて何かしらの処理を行いたい場合に使用します。
window.addEventListener('scroll', function() {
console.log('ページがスクロールされました');
});clickイベント
clickイベントは、ユーザーがマウスやタッチデバイスで要素をクリックしたときに発生するイベントです。
JavaScriptでは、clickイベントを使って、ユーザーの操作に応じて動的に処理を行うことができます。
clickイベントの基本
<button id="button">クリックしてね</button>// ボタンの要素を取得
var button = document.querySelector('#button');
// clickイベントを追加
button.addEventListener('click', function() {
console.log('ボタンがクリックされました！');
});clickイベントのキャンセル
デフォルトのイベントをキャンセルしたい場合、event.preventDefault() を使います。
例えば、リンクをクリックしたときにページの遷移を止めることができます。
// ボタンの要素を取得
var button = document.querySelector('#button');
// clickイベントを追加
button.addEventListener('click', function(event) {
event.preventDefault(); // リンクのデフォルト動作をキャンセル
console.log('ボタンがクリックされました！');
});複数の要素に対してのイベント設定
querySelectorAll で取得した複数の要素に対してイベントを設定するには、取得した要素をループして、一つずつイベントを設定する方法が一般的です。
// すべてのボタン要素を取得
// querySelectorAllなのでNodeList（特殊な配列）で取得する。
var buttons = document.querySelectorAll('.button');
// 各要素にイベントを設定
for ( var i = 0; i < buttons.length; i++ ) {
buttons[i].addEventListener('click', function() {
console.log('ボタンがクリックされました！');
});
}タイマー処理
タイマー処理は、JavaScriptで特定のタイミングでコードを実行するために使われる機能です。
タイマー処理を使うことで、指定した時間後に処理を行ったり、一定の間隔で繰り返し処理を実行できます。
JavaScriptでよく使うタイマー処理には、次の2つがあります。
- setTimeout: 一定時間後に一度だけコードを実行する
- setInterval: 一定の間隔で繰り返しコードを実行する
setTimeout: 一定時間後に一度だけ処理を実行
setTimeout は、指定したミリ秒（1秒 = 1000ミリ秒）後に1回だけ指定した関数や処理を実行します。
基本構文
setTimeout(関数, 遅延時間);
関数: 実行したい処理。通常は無名関数（匿名関数）または既存の関数を指定します。
遅延時間: 処理を遅らせる時間（ミリ秒単位）。例えば、1000 は1秒後に実行されることを意味します。
例1: 2秒後にメッセージを表示
setTimeout(function() {
console.log('2秒後に表示されます');
}, 2000);setInterval: 一定の間隔で繰り返し処理を実行
setInterval は、指定したミリ秒ごとに繰り返し関数や処理を実行します。setTimeout と異なり、タイマーが停止するまで何度も処理を繰り返します。
基本構文
setInterval(関数, インターバル時間);
関数: 実行したい処理。setTimeout と同様に無名関数や既存の関数を指定します。
インターバル時間: 繰り返し処理を行う間隔（ミリ秒単位）。
例1: 1秒ごとにメッセージを表示
setInterval(function() {
console.log('1秒ごとに表示されます');
}, 1000);