JavaScript DOM事件

JavaScript DOM事件

DOM事件是JavaScript与HTML文档交互的核心机制之一，允许开发者对用户操作（如点击、滚动、键盘输入等）或浏览器行为（如页面加载、资源加载完成等）作出响应。本指南将详细介绍DOM事件的工作原理、常见类型及实际应用。

事件基础

DOM事件遵循事件驱动编程模型，其流程分为三个阶段：

1. 捕获阶段（从window对象向下传递到目标元素）
2. 目标阶段（到达实际触发事件的元素）
3. 冒泡阶段（从目标元素向上冒泡到window对象）

可通过以下属性观察事件流程：

document.querySelector('button').addEventListener('click', function(e) {
    console.log(`事件阶段: ${e.eventPhase}`); // 1=捕获, 2=目标, 3=冒泡
}, true); // true表示在捕获阶段监听

事件监听方法

addEventListener()

推荐的标准方法，支持多个监听器：

element.addEventListener('click', function(event) {
    console.log('按钮被点击！', event.target);
});

内联事件处理（不推荐）

HTML属性中直接定义：

<button onclick="alert('点击!')">点击我</button>

常见事件类型

核心事件分类

类型	事件示例	描述	鼠标事件	click, dblclick, mouseover	用户鼠标交互	键盘事件	keydown, keyup	键盘按键操作	表单事件	submit, change, focus	表单元素交互	窗口事件	load, resize, scroll	浏览器窗口变化

事件对象

事件处理函数接收的Event对象包含关键属性和方法：

• target：触发事件的元素
• preventDefault()：阻止默认行为
• stopPropagation()：停止事件传播

示例阻止表单提交：

document.querySelector('form').addEventListener('submit', function(e) {
    if (!valid) {
        e.preventDefault(); // 阻止表单提交
        console.log('验证失败！');
    }
});

事件委托

利用冒泡机制优化性能，特别适合动态内容：

document.querySelector('ul').addEventListener('click', function(e) {
    if (e.target.tagName === 'LI') {
        console.log(`点击了列表项: ${e.target.textContent}`);
    }
});

graph TD A[父元素 ul] --> B[子元素 li] A --> C[子元素 li] B -->|事件冒泡| A C -->|事件冒泡| A

自定义事件

创建并触发自定义事件：

// 创建事件
const event = new CustomEvent('build', { 
    detail: { time: Date.now() },
    bubbles: true
});

// 监听事件
elem.addEventListener('build', function(e) {
    console.log('自定义事件触发:', e.detail);
});

// 触发事件
elem.dispatchEvent(event);

性能优化

• 使用事件委托减少监听器数量
• 对滚动等高频事件使用节流(throttling)：

function throttle(func, delay) {
    let lastCall = 0;
    return function(...args) {
        const now = new Date().getTime();
        if (now - lastCall < delay) return;
        lastCall = now;
        return func.apply(this, args);
    };
}

window.addEventListener('scroll', throttle(function() {
    console.log('处理滚动...');
}, 100));

实际案例

可折叠面板

document.querySelectorAll('.panel-header').forEach(header => {
    header.addEventListener('click', () => {
        header.nextElementSibling.classList.toggle('collapsed');
    });
});

实时搜索

searchInput.addEventListener('input', function() {
    const term = this.value.toLowerCase();
    document.querySelectorAll('.item').forEach(item => {
        item.style.display = item.textContent.toLowerCase().includes(term) 
            ? 'block' 
            : 'none';
    });
});

常见问题

Q: 为什么我的事件监听器不工作？ A: 可能原因：

• 脚本在DOM加载前执行 → 将脚本放在body末尾或使用DOMContentLoaded事件
• 选择器错误 → 检查元素是否存在
• 动态生成元素未使用事件委托

Q: 如何移除事件监听器？ A: 使用removeEventListener，需保持函数引用：

const handler = function() { console.log('只执行一次'); };
element.addEventListener('click', handler);
element.removeEventListener('click', handler);

进阶主题

• 被动事件监听器：使用{ passive: true }选项改善滚动性能
• 事件循环与微任务/宏任务的关系
• Pointer Events统一鼠标/触摸/触控笔输入

通过掌握DOM事件，您将能够构建丰富的交互式Web应用。建议在实践中结合开发者工具的Event Listeners面板进行调试和分析。