JavaScriptイベント一覧 - 初心者が覚えるべき10のイベント

みなさん、JavaScriptでWebページに動きを付けたいと思っていて「どのイベントから覚えればいいの？」って悩んだことはありませんか？

「イベントがたくさんあって覚えきれない」 「どれが重要なのか分からない」

こんな風に感じたことはありませんか？

この記事では、JavaScript初心者が最初に覚えるべき重要なイベント10選を詳しく解説します。 各イベントの基本的な使い方から実践的な応用例まで、実際のコード例を交えて一緒に学んでいきましょう。

JavaScriptイベントって何？

まず、イベントの基本的な仕組みを理解しましょう。

イベントとは

イベントは、ユーザーの操作やブラウザの状態変化を検知する仕組みです。

簡単に言うと、「何かが起こった時に、それを教えてくれる機能」のことです。

// 基本的なイベントリスナーの設定
document.getElementById("myButton").addEventListener("click", function() {
    alert("ボタンがクリックされました！");
});

この例では、ボタンがクリックされた時に「ボタンがクリックされました！」というメッセージが表示されます。

イベントリスナーの基本構文を覚えよう

// 基本的な構文
要素.addEventListener("イベント名", 関数);

// 具体例
let button = document.getElementById("submitButton");
button.addEventListener("click", function(event) {
    console.log("クリックされました");
    console.log("イベント情報:", event);
});

// アロー関数を使った書き方
button.addEventListener("click", (event) => {
    console.log("アロー関数でのクリック処理");
});

上記のコードを順番に見ていきましょう。

まず、基本的な構文です。

要素.addEventListener("イベント名", 関数);

addEventListenerは「このイベントが起こった時に、この関数を実行してください」とブラウザにお願いする機能です。

次に、具体的な例を見てみましょう。

let button = document.getElementById("submitButton");
button.addEventListener("click", function(event) {
    console.log("クリックされました");
    console.log("イベント情報:", event);
});

getElementByIdでボタンを取得して、クリックイベントを設定しています。 eventという引数には、クリックに関する詳細な情報が入っています。

イベントオブジェクトには何が入ってる？

document.addEventListener("click", function(event) {
    console.log("クリックされた要素:", event.target);
    console.log("クリック座標:", event.clientX, event.clientY);
    console.log("イベントタイプ:", event.type);
});

イベントオブジェクトには、発生したイベントに関する詳細な情報が含まれています。 どこをクリックしたか、どのキーが押されたかなど、便利な情報がたくさん入っています。

1. clickイベント - 最初に覚えるべきイベント

ユーザーがクリックしたときに発生するイベントです。

基本的な使い方

// HTML: <button id="myButton">クリックしてください</button>

let button = document.getElementById("myButton");

button.addEventListener("click", function() {
    alert("ボタンがクリックされました！");
});

// より詳細な情報を取得
button.addEventListener("click", function(event) {
    console.log("クリックされた要素:", event.target);
    console.log("クリック時刻:", new Date());
    console.log("マウス座標:", event.clientX, event.clientY);
});

最初のコードは、シンプルなボタンクリックの例です。

button.addEventListener("click", function() {
    alert("ボタンがクリックされました！");
});

ボタンがクリックされると、アラートが表示されます。

次のコードでは、より詳細な情報を取得しています。

button.addEventListener("click", function(event) {
    console.log("クリックされた要素:", event.target);
    console.log("クリック時刻:", new Date());
    console.log("マウス座標:", event.clientX, event.clientY);
});

event.targetでクリックされた要素、event.clientXとevent.clientYでマウスの座標が分かります。

実際に作って覚えよう

// カウンターアプリ
let count = 0;
let counterDisplay = document.getElementById("counter");
let incrementButton = document.getElementById("increment");
let decrementButton = document.getElementById("decrement");

incrementButton.addEventListener("click", function() {
    count++;
    counterDisplay.textContent = count;
});

decrementButton.addEventListener("click", function() {
    count--;
    counterDisplay.textContent = count;
});

// 画像ギャラリー
let images = ["image1.jpg", "image2.jpg", "image3.jpg"];
let currentIndex = 0;
let gallery = document.getElementById("gallery");
let nextButton = document.getElementById("next");

nextButton.addEventListener("click", function() {
    currentIndex = (currentIndex + 1) % images.length;
    gallery.src = images[currentIndex];
});

カウンターアプリでは、ボタンをクリックするたびに数字が増減します。

incrementButton.addEventListener("click", function() {
    count++;
    counterDisplay.textContent = count;
});

クリックされるたびにcountを1増やして、画面に表示しています。

画像ギャラリーでは、ボタンをクリックするたびに次の画像に切り替わります。

nextButton.addEventListener("click", function() {
    currentIndex = (currentIndex + 1) % images.length;
    gallery.src = images[currentIndex];
});

%演算子を使うことで、最後の画像の次は最初の画像に戻ります。

2. loadイベント - ページが読み込まれた時

ページやリソースの読み込みが完了したときに発生するイベントです。

基本的な使い方

// ページ全体の読み込み完了時
window.addEventListener("load", function() {
    console.log("ページの読み込みが完了しました");
    // 初期化処理をここに記述
});

// 画像の読み込み完了時
let image = document.getElementById("myImage");
image.addEventListener("load", function() {
    console.log("画像の読み込みが完了しました");
    this.style.opacity = "1"; // フェードイン効果
});

window.addEventListener("load", ...)では、ページ全体の読み込み完了を待ちます。

window.addEventListener("load", function() {
    console.log("ページの読み込みが完了しました");
    // 初期化処理をここに記述
});

ここで初期化処理を行うことで、すべての要素が確実に存在している状態で処理を実行できます。

画像の読み込み完了時の処理も便利です。

image.addEventListener("load", function() {
    console.log("画像の読み込みが完了しました");
    this.style.opacity = "1"; // フェードイン効果
});

画像が読み込まれた後にフェードイン効果を追加できます。

実際のアプリで使ってみよう

// アプリケーションの初期化
window.addEventListener("load", function() {
    // ローディング画面を非表示
    document.getElementById("loading").style.display = "none";
    
    // メインコンテンツを表示
    document.getElementById("main-content").style.display = "block";
    
    // ユーザーデータを取得
    loadUserData();
    
    // イベントリスナーを設定
    setupEventListeners();
});

function loadUserData() {
    // ユーザーデータの取得処理
    console.log("ユーザーデータを読み込み中...");
}

function setupEventListeners() {
    // 各種イベントリスナーの設定
    console.log("イベントリスナーを設定中...");
}

この例では、ページが読み込まれた後に以下の処理を順番に実行しています。

まず、ローディング画面を非表示にします。

document.getElementById("loading").style.display = "none";

次に、メインコンテンツを表示します。

document.getElementById("main-content").style.display = "block";

最後に、必要な初期化処理を実行します。

3. DOMContentLoadedイベント - DOM構築完了時

HTMLの解析が完了し、DOMが構築されたときに発生するイベントです。

loadイベントとの違いを理解しよう

// DOMContentLoaded: HTMLの解析完了時（画像読み込み前）
document.addEventListener("DOMContentLoaded", function() {
    console.log("DOMの構築が完了しました");
    // DOM要素にアクセス可能
});

// load: すべてのリソース読み込み完了時
window.addEventListener("load", function() {
    console.log("すべてのリソースの読み込み完了");
    // 画像なども含めて完全に読み込み完了
});

重要な違い：

• DOMContentLoaded: HTMLの構造だけ読み込み完了（早い）
• load: 画像なども含めてすべて読み込み完了（遅い）

多くの場合、DOMContentLoadedを使うことで、より速くJavaScriptを実行できます。

実際に使ってみよう

document.addEventListener("DOMContentLoaded", function() {
    // フォームバリデーションの設定
    setupFormValidation();
    
    // ナビゲーションメニューの設定
    setupNavigation();
    
    // ツールチップの初期化
    initializeTooltips();
    
    // テーマ設定の読み込み
    loadThemeSettings();
});

function setupFormValidation() {
    let forms = document.querySelectorAll("form");
    
    forms.forEach(form => {
        form.addEventListener("submit", function(event) {
            if (!validateForm(this)) {
                event.preventDefault();
            }
        });
    });
}

function setupNavigation() {
    let menuButton = document.getElementById("menu-toggle");
    let navigation = document.getElementById("navigation");
    
    if (menuButton && navigation) {
        menuButton.addEventListener("click", function() {
            navigation.classList.toggle("open");
        });
    }
}

DOMContentLoadedで初期化処理を実行することで、ページが早く使える状態になります。

4. submitイベント - フォーム送信時

フォームが送信されるときに発生するイベントです。

基本的な使い方

// HTML: <form id="myForm">...</form>

let form = document.getElementById("myForm");

form.addEventListener("submit", function(event) {
    event.preventDefault(); // デフォルトの送信を防ぐ
    
    console.log("フォームが送信されました");
    
    // カスタム処理を実行
    handleFormSubmit(this);
});

function handleFormSubmit(form) {
    let formData = new FormData(form);
    
    // フォームデータを処理
    for (let [key, value] of formData) {
        console.log(key, value);
    }
}

event.preventDefault()がとても重要です。

event.preventDefault(); // デフォルトの送信を防ぐ

これを書くことで、ページのリロードを防いで、JavaScriptで処理を続けることができます。

FormDataを使うと、フォームのデータを簡単に取得できます。

let formData = new FormData(form);

// フォームデータを処理
for (let [key, value] of formData) {
    console.log(key, value);
}

各入力項目の名前と値を順番に取得できます。

実際のお問い合わせフォームを作ってみよう

// 包括的なフォーム処理
document.addEventListener("DOMContentLoaded", function() {
    let contactForm = document.getElementById("contact-form");
    
    contactForm.addEventListener("submit", function(event) {
        event.preventDefault();
        
        // バリデーション実行
        if (validateContactForm(this)) {
            submitContactForm(this);
        }
    });
});

function validateContactForm(form) {
    let isValid = true;
    let errors = [];
    
    // 名前のバリデーション
    let name = form.querySelector('input[name="name"]').value.trim();
    if (name === "") {
        errors.push("名前を入力してください");
        isValid = false;
    }
    
    // メールアドレスのバリデーション
    let email = form.querySelector('input[name="email"]').value.trim();
    let emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailPattern.test(email)) {
        errors.push("有効なメールアドレスを入力してください");
        isValid = false;
    }
    
    // エラー表示
    let errorContainer = document.getElementById("form-errors");
    if (errors.length > 0) {
        errorContainer.innerHTML = errors.map(error => `<p class="error">${error}</p>`).join("");
    } else {
        errorContainer.innerHTML = "";
    }
    
    return isValid;
}

この例では、フォーム送信前にバリデーション（入力チェック）を行っています。

バリデーション関数では、名前とメールアドレスをチェックしています。

// 名前のバリデーション
let name = form.querySelector('input[name="name"]').value.trim();
if (name === "") {
    errors.push("名前を入力してください");
    isValid = false;
}

trim()で前後の空白を削除してから、空でないかチェックしています。

5. changeイベント - 値が変更された時

フォーム要素の値が変更されたときに発生するイベントです。

基本的な使い方

// セレクトボックスの変更
let selectBox = document.getElementById("category");
selectBox.addEventListener("change", function() {
    console.log("選択された値:", this.value);
});

// チェックボックスの変更
let checkbox = document.getElementById("agreement");
checkbox.addEventListener("change", function() {
    console.log("チェック状態:", this.checked);
});

// テキスト入力の変更
let textInput = document.getElementById("username");
textInput.addEventListener("change", function() {
    console.log("入力値:", this.value);
});

セレクトボックスでは、選択肢が変更された時に実行されます。

selectBox.addEventListener("change", function() {
    console.log("選択された値:", this.value);
});

this.valueで現在選択されている値を取得できます。

チェックボックスでは、チェックのオン・オフが変更された時に実行されます。

checkbox.addEventListener("change", function() {
    console.log("チェック状態:", this.checked);
});

this.checkedでtrue（チェック済み）かfalse（未チェック）が分かります。

動的に変化するフォームを作ってみよう

// 動的フォーム制御
document.addEventListener("DOMContentLoaded", function() {
    let categorySelect = document.getElementById("category");
    let subcategorySelect = document.getElementById("subcategory");
    
    // カテゴリー変更時にサブカテゴリーを更新
    categorySelect.addEventListener("change", function() {
        updateSubcategories(this.value);
    });
    
    // ファイルアップロード時のプレビュー
    let fileInput = document.getElementById("file-upload");
    fileInput.addEventListener("change", function() {
        previewFiles(this.files);
    });
    
    // リアルタイム価格計算
    let quantityInput = document.getElementById("quantity");
    let priceDisplay = document.getElementById("total-price");
    
    quantityInput.addEventListener("change", function() {
        updateTotalPrice(parseInt(this.value));
    });
});

function updateSubcategories(categoryId) {
    let subcategorySelect = document.getElementById("subcategory");
    
    // サブカテゴリーをクリア
    subcategorySelect.innerHTML = '<option value="">選択してください</option>';
    
    // カテゴリーに応じたサブカテゴリーを追加
    let subcategories = getSubcategories(categoryId);
    subcategories.forEach(sub => {
        let option = document.createElement("option");
        option.value = sub.id;
        option.textContent = sub.name;
        subcategorySelect.appendChild(option);
    });
}

この例では、カテゴリーが変更されると、サブカテゴリーの選択肢も自動的に更新されます。

カテゴリー変更時の処理を見てみましょう。

categorySelect.addEventListener("change", function() {
    updateSubcategories(this.value);
});

選択されたカテゴリーのIDをupdateSubcategories関数に渡しています。

6. keydownイベント - キーが押された時

キーボードのキーが押されたときに発生するイベントです。

基本的な使い方

// 特定のキーを検出
document.addEventListener("keydown", function(event) {
    console.log("押されたキー:", event.key);
    console.log("キーコード:", event.keyCode);
    
    // Enterキーの場合
    if (event.key === "Enter") {
        console.log("Enterキーが押されました");
    }
    
    // Escapeキーの場合
    if (event.key === "Escape") {
        console.log("Escapeキーが押されました");
    }
});

// テキスト入力での特定キー処理
let searchInput = document.getElementById("search");
searchInput.addEventListener("keydown", function(event) {
    if (event.key === "Enter") {
        performSearch(this.value);
    }
});

event.keyで押されたキーの名前が分かります。

if (event.key === "Enter") {
    console.log("Enterキーが押されました");
}

よく使われるキーには分かりやすい名前が付いています（"Enter", "Escape", "ArrowUp"など）。

検索ボックスでEnterキーを押した時の処理も便利です。

searchInput.addEventListener("keydown", function(event) {
    if (event.key === "Enter") {
        performSearch(this.value);
    }
});

検索ボタンをクリックしなくても、Enterキーで検索を実行できます。

キーボードショートカットを作ってみよう

// キーボードショートカットの実装
document.addEventListener("keydown", function(event) {
    // Ctrl+S で保存
    if (event.ctrlKey && event.key === "s") {
        event.preventDefault();
        saveDocument();
    }
    
    // Ctrl+Z で元に戻す
    if (event.ctrlKey && event.key === "z") {
        event.preventDefault();
        undoAction();
    }
    
    // Escapeでモーダルを閉じる
    if (event.key === "Escape") {
        closeModal();
    }
});

// ゲームライクなキー操作
let player = { x: 100, y: 100 };
let playerElement = document.getElementById("player");

document.addEventListener("keydown", function(event) {
    let moveDistance = 10;
    
    switch (event.key) {
        case "ArrowUp":
            player.y -= moveDistance;
            break;
        case "ArrowDown":
            player.y += moveDistance;
            break;
        case "ArrowLeft":
            player.x -= moveDistance;
            break;
        case "ArrowRight":
            player.x += moveDistance;
            break;
    }
    
    // プレイヤーの位置を更新
    updatePlayerPosition();
});

function updatePlayerPosition() {
    playerElement.style.left = player.x + "px";
    playerElement.style.top = player.y + "px";
}

Ctrl+Sで保存のショートカットを作る例を見てみましょう。

if (event.ctrlKey && event.key === "s") {
    event.preventDefault();
    saveDocument();
}

event.ctrlKeyでCtrlキーが押されているかチェックし、同時に"s"キーが押されているかを確認しています。 event.preventDefault()でブラウザのデフォルト動作（保存ダイアログ）を防いでいます。

7. mouseoverとmouseoutイベント - マウスの出入り

マウスが要素に乗った時と離れた時に発生するイベントです。

基本的な使い方

let button = document.getElementById("hover-button");

// マウスが乗った時
button.addEventListener("mouseover", function() {
    this.style.backgroundColor = "#007bff";
    this.style.color = "white";
});

// マウスが離れた時
button.addEventListener("mouseout", function() {
    this.style.backgroundColor = "";
    this.style.color = "";
});

mouseoverでマウスが要素に乗った時の処理を設定します。

button.addEventListener("mouseover", function() {
    this.style.backgroundColor = "#007bff";
    this.style.color = "white";
});

この例では、マウスが乗ると背景色と文字色が変わります。

mouseoutでマウスが離れた時の処理を設定します。

button.addEventListener("mouseout", function() {
    this.style.backgroundColor = "";
    this.style.color = "";
});

元の色に戻すために、空文字を設定しています。

ツールチップを作ってみよう

// ツールチップの実装
let tooltipElements = document.querySelectorAll("[data-tooltip]");

tooltipElements.forEach(element => {
    let tooltip = null;
    
    element.addEventListener("mouseover", function(event) {
        // ツールチップを作成
        tooltip = document.createElement("div");
        tooltip.className = "tooltip";
        tooltip.textContent = this.getAttribute("data-tooltip");
        tooltip.style.position = "absolute";
        tooltip.style.backgroundColor = "#333";
        tooltip.style.color = "white";
        tooltip.style.padding = "5px 10px";
        tooltip.style.borderRadius = "4px";
        tooltip.style.fontSize = "12px";
        tooltip.style.zIndex = "1000";
        
        // 位置を設定
        tooltip.style.left = event.pageX + 10 + "px";
        tooltip.style.top = event.pageY - 30 + "px";
        
        document.body.appendChild(tooltip);
    });
    
    element.addEventListener("mouseout", function() {
        if (tooltip) {
            tooltip.remove();
            tooltip = null;
        }
    });
});

この例では、data-tooltip属性を持つ要素にマウスを乗せると、ツールチップが表示されます。

マウスオーバー時の処理を詳しく見てみましょう。

element.addEventListener("mouseover", function(event) {
    // ツールチップを作成
    tooltip = document.createElement("div");
    tooltip.className = "tooltip";
    tooltip.textContent = this.getAttribute("data-tooltip");

createElementで新しいdiv要素を作成し、getAttributeでツールチップの内容を取得しています。

8. scrollイベント - スクロール時

ページやエリアがスクロールされたときに発生するイベントです。

基本的な使い方

// ページスクロールの検出
window.addEventListener("scroll", function() {
    let scrollY = window.scrollY;
    console.log("スクロール位置:", scrollY);
});

// 特定要素のスクロール
let scrollableArea = document.getElementById("scrollable");
scrollableArea.addEventListener("scroll", function() {
    console.log("エリア内スクロール:", this.scrollTop);
});

window.scrollYで現在のスクロール位置が分かります。

window.addEventListener("scroll", function() {
    let scrollY = window.scrollY;
    console.log("スクロール位置:", scrollY);
});

ページの上端が0で、下にスクロールするほど数字が大きくなります。

スクロールナビゲーションを作ってみよう

// スクロールに応じたナビゲーション表示
let navbar = document.getElementById("navbar");
let lastScrollY = 0;

window.addEventListener("scroll", function() {
    let currentScrollY = window.scrollY;
    
    if (currentScrollY > 100) {
        navbar.classList.add("scrolled");
    } else {
        navbar.classList.remove("scrolled");
    }
    
    // スクロール方向による表示/非表示
    if (currentScrollY > lastScrollY && currentScrollY > 200) {
        navbar.classList.add("hidden");
    } else {
        navbar.classList.remove("hidden");
    }
    
    lastScrollY = currentScrollY;
});

この例では、スクロール位置に応じてナビゲーションバーの表示を変更しています。

スクロール位置が100ピクセルを超えるとscrolledクラスが追加されます。

if (currentScrollY > 100) {
    navbar.classList.add("scrolled");
} else {
    navbar.classList.remove("scrolled");
}

CSSでscrolledクラスのスタイルを定義することで、ナビゲーションの見た目を変更できます。

9. resizeイベント - ウィンドウサイズ変更時

ブラウザウィンドウのサイズが変更されたときに発生するイベントです。

基本的な使い方

window.addEventListener("resize", function() {
    console.log("ウィンドウサイズ:", window.innerWidth, window.innerHeight);
});

window.innerWidthとwindow.innerHeightで現在のウィンドウサイズが分かります。

レスポンシブデザインを制御してみよう

// レスポンシブデザインの制御
let sidebar = document.getElementById("sidebar");
let mainContent = document.getElementById("main-content");

function handleResize() {
    let windowWidth = window.innerWidth;
    
    if (windowWidth < 768) {
        // モバイル表示
        sidebar.classList.add("mobile");
        mainContent.classList.add("full-width");
    } else {
        // デスクトップ表示
        sidebar.classList.remove("mobile");
        mainContent.classList.remove("full-width");
    }
}

// 初期実行
handleResize();

// リサイズ時の実行（デバウンス付き）
let resizeTimeout;
window.addEventListener("resize", function() {
    clearTimeout(resizeTimeout);
    resizeTimeout = setTimeout(handleResize, 100);
});

この例では、ウィンドウ幅が768ピクセル未満の場合にモバイル表示に切り替えています。

if (windowWidth < 768) {
    // モバイル表示
    sidebar.classList.add("mobile");
    mainContent.classList.add("full-width");
} else {
    // デスクトップ表示
    sidebar.classList.remove("mobile");
    mainContent.classList.remove("full-width");
}

CSSのメディアクエリだけでは難しい、複雑なレスポンシブ制御が可能になります。

10. focusとblurイベント - フォーカス制御

要素にフォーカスが当たった時と外れた時に発生するイベントです。

基本的な使い方

let input = document.getElementById("username");

// フォーカス時
input.addEventListener("focus", function() {
    this.style.borderColor = "#007bff";
    console.log("フォーカスされました");
});

// フォーカス外れ時
input.addEventListener("blur", function() {
    this.style.borderColor = "";
    console.log("フォーカスが外れました");
});

focusは入力フィールドにカーソルが当たった時に発生します。

input.addEventListener("focus", function() {
    this.style.borderColor = "#007bff";
    console.log("フォーカスされました");
});

この例では、フォーカス時に枠線の色を青に変更しています。

blurはフォーカスが外れた時（他の場所をクリックした時など）に発生します。

リアルタイムバリデーションを作ってみよう

// リアルタイムバリデーション
let formInputs = document.querySelectorAll("input, textarea");

formInputs.forEach(input => {
    input.addEventListener("focus", function() {
        // エラーメッセージをクリア
        clearFieldError(this);
        
        // フォーカス時のスタイル
        this.parentElement.classList.add("focused");
    });
    
    input.addEventListener("blur", function() {
        // バリデーション実行
        validateField(this);
        
        // フォーカス時のスタイルを削除
        this.parentElement.classList.remove("focused");
    });
});

function validateField(field) {
    let value = field.value.trim();
    let fieldName = field.getAttribute("name");
    let isValid = true;
    let errorMessage = "";
    
    switch (fieldName) {
        case "email":
            if (!value.includes("@")) {
                isValid = false;
                errorMessage = "有効なメールアドレスを入力してください";
            }
            break;
        case "password":
            if (value.length < 8) {
                isValid = false;
                errorMessage = "パスワードは8文字以上で入力してください";
            }
            break;
    }
    
    if (!isValid) {
        showFieldError(field, errorMessage);
    }
}

この例では、入力フィールドからフォーカスが外れた時に自動的にバリデーションを実行しています。

フォーカス時の処理を見てみましょう。

input.addEventListener("focus", function() {
    // エラーメッセージをクリア
    clearFieldError(this);
    
    // フォーカス時のスタイル
    this.parentElement.classList.add("focused");
});

フォーカス時にエラーメッセージをクリアして、見た目も変更しています。

イベント使用時のコツ

効率的で保守しやすいイベント処理のためのベストプラクティスです。

イベント委譲を活用しよう

// 非効率な方法（各要素に個別にリスナーを追加）
let buttons = document.querySelectorAll(".button");
buttons.forEach(button => {
    button.addEventListener("click", handleClick);
});

// 効率的な方法（イベント委譲）
document.addEventListener("click", function(event) {
    if (event.target.classList.contains("button")) {
        handleClick(event);
    }
});

function handleClick(event) {
    console.log("ボタンがクリックされました:", event.target);
}

イベント委譲を使うことで、たくさんの要素に対して効率的にイベントを設定できます。

非効率な方法では、ボタンが100個あれば100個のイベントリスナーが必要です。

効率的な方法では、1つのイベントリスナーですべてのボタンに対応できます。

デバウンスでパフォーマンスを向上させよう

// デバウンス関数
function debounce(func, wait) {
    let timeout;
    return function executedFunction(...args) {
        const later = () => {
            clearTimeout(timeout);
            func(...args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
    };
}

// 使用例
let debouncedSearch = debounce(performSearch, 300);

searchInput.addEventListener("input", debouncedSearch);

デバウンスは、短時間に何度も実行される処理を制限するテクニックです。

検索機能で入力のたびに検索するのではなく、入力が止まってから300ミリ秒後に検索を実行します。

まとめ

JavaScript初心者が覚えるべき重要なイベント10選について詳しく解説しました。

基本的なイベント：

1. click: 最も基本的なユーザー操作
2. load: ページ読み込み完了時の初期化
3. DOMContentLoaded: DOM構築完了時の早期初期化
4. submit: フォーム送信時の処理
5. change: フォーム値変更時の動的制御

応用的なイベント：

1. keydown: キーボード操作とショートカット
2. mouseover/mouseout: ホバー効果とツールチップ
3. scroll: スクロール連動機能
4. resize: レスポンシブ制御
5. focus/blur: フォーカス管理とバリデーション

実践でのポイント：

• イベント委譲の活用
• パフォーマンスの最適化
• ユーザー体験の向上

これらのイベントを適切に使いこなすことで、ユーザーフレンドリーでインタラクティブなWebアプリケーションが作成できるようになります。

まずは基本的なイベントから始めて、徐々に応用的なイベントにも挑戦してみてください！

きっと素晴らしいWebページが作れるようになりますよ。