關監聽技巧的java script的應用v1

這是一個基礎使用JS監聽的應用，

目的是因應在各需求中延伸使用的思考。

Java Script:

  // 當整個DOM內容載入完成後執行
document.addEventListener('DOMContentLoaded', function() {
    // 獲取需要監聽的元素
    const loginForm = document.getElementById('loginForm');
    const userInput = document.getElementById('username');
    const submitBtn = document.getElementById('submitBtn');
    const themeToggle = document.getElementById('themeToggle');
    
    // 表單提交監聽
    loginForm.addEventListener('submit', function(event) {
        event.preventDefault();
        console.log('表單提交');
        validateForm();
    });

    // 輸入框值變化監聽
    userInput.addEventListener('input', function(event) {
        const value = event.target.value;
        console.log('輸入值:', value);
        // 即時驗證使用者輸入
        if (value.length < 3) {
            userInput.classList.add('invalid');
        } else {
            userInput.classList.remove('invalid');
        }
    });

    // 按鈕點擊監聽
    let clickCount = 0;
    submitBtn.addEventListener('click', function(event) {
        clickCount++;
        console.log(`按鈕被點擊了 ${clickCount} 次`);
    });

    // 按鍵監聽
    document.addEventListener('keydown', function(event) {
        // 監聽特定快捷鍵
        if (event.ctrlKey && event.key === 's') {
            event.preventDefault();
            console.log('觸發保存快捷鍵');
            saveData();
        }
    });

    // 滑鼠移動監聽
    let throttleTimer;
    document.addEventListener('mousemove', function(event) {
        // 使用節流(throttle)技術來優化性能
        if (!throttleTimer) {
            throttleTimer = setTimeout(function() {
                console.log(`滑鼠位置 - X: ${event.clientX}, Y: ${event.clientY}`);
                throttleTimer = null;
            }, 100);
        }
    });

    // 自定義事件監聽
    const customEvent = new CustomEvent('themeChange', {
        detail: { theme: 'dark' }
    });

    themeToggle.addEventListener('themeChange', function(event) {
        console.log(`主題切換為: ${event.detail.theme}`);
        document.body.classList.toggle('dark-theme');
    });

    // 模擬觸發自定義事件
    themeToggle.dispatchEvent(customEvent);

    // 輔助函數
    function validateForm() {
        // 表單驗證邏輯
        console.log('執行表單驗證');
    }

    function saveData() {
        // 保存數據邏輯
        console.log('執行數據保存');
    }
});

// 監聽網頁生命週期事件
window.addEventListener('load', function() {
    console.log('頁面完全載入完成');
});

window.addEventListener('beforeunload', function(event) {
    // 在用戶離開頁面前提醒
    event.preventDefault();
    event.returnValue = '';
});