编辑“︁JavaScript DOM事件”︁（章节）

= JavaScript DOM事件 =

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

== 事件基础 ==
DOM事件遵循'''事件驱动编程'''模型，其流程分为三个阶段：
# '''捕获阶段'''（从window对象向下传递到目标元素）
# '''目标阶段'''（到达实际触发事件的元素）
# '''冒泡阶段'''（从目标元素向上冒泡到window对象）

可通过以下属性观察事件流程：
<syntaxhighlight lang="javascript">
document.querySelector('button').addEventListener('click', function(e) {
    console.log(`事件阶段: ${e.eventPhase}`); // 1=捕获, 2=目标, 3=冒泡
}, true); // true表示在捕获阶段监听
</syntaxhighlight>

== 事件监听方法 ==
=== addEventListener() ===
推荐的标准方法，支持多个监听器：
<syntaxhighlight lang="javascript">
element.addEventListener('click', function(event) {
    console.log('按钮被点击！', event.target);
});
</syntaxhighlight>

=== 内联事件处理（不推荐） ===
HTML属性中直接定义：
<syntaxhighlight lang="html">
<button onclick="alert('点击!')">点击我</button>
</syntaxhighlight>

== 常见事件类型 ==
{| class="wikitable"
|+ 核心事件分类
! 类型 !! 事件示例 !! 描述

| 鼠标事件 || <code>click</code>, <code>dblclick</code>, <code>mouseover</code> || 用户鼠标交互

| 键盘事件 || <code>keydown</code>, <code>keyup</code> || 键盘按键操作

| 表单事件 || <code>submit</code>, <code>change</code>, <code>focus</code> || 表单元素交互

| 窗口事件 || <code>load</code>, <code>resize</code>, <code>scroll</code> || 浏览器窗口变化
|}

== 事件对象 ==
事件处理函数接收的'''Event对象'''包含关键属性和方法：
* <code>target</code>：触发事件的元素
* <code>preventDefault()</code>：阻止默认行为
* <code>stopPropagation()</code>：停止事件传播

示例阻止表单提交：
<syntaxhighlight lang="javascript">
document.querySelector('form').addEventListener('submit', function(e) {
    if (!valid) {
        e.preventDefault(); // 阻止表单提交
        console.log('验证失败！');
    }
});
</syntaxhighlight>

== 事件委托 ==
利用冒泡机制优化性能，特别适合动态内容：
<syntaxhighlight lang="javascript">
document.querySelector('ul').addEventListener('click', function(e) {
    if (e.target.tagName === 'LI') {
        console.log(`点击了列表项: ${e.target.textContent}`);
    }
});
</syntaxhighlight>

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

== 自定义事件 ==
创建并触发自定义事件：
<syntaxhighlight lang="javascript">
// 创建事件
const event = new CustomEvent('build', { 
    detail: { time: Date.now() },
    bubbles: true
});

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

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

== 性能优化 ==
* 使用事件委托减少监听器数量
* 对滚动等高频事件使用节流(throttling)：
<syntaxhighlight lang="javascript">
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));
</syntaxhighlight>

== 实际案例 ==
=== 可折叠面板 ===
<syntaxhighlight lang="javascript">
document.querySelectorAll('.panel-header').forEach(header => {
    header.addEventListener('click', () => {
        header.nextElementSibling.classList.toggle('collapsed');
    });
});
</syntaxhighlight>

=== 实时搜索 ===
<syntaxhighlight lang="javascript">
searchInput.addEventListener('input', function() {
    const term = this.value.toLowerCase();
    document.querySelectorAll('.item').forEach(item => {
        item.style.display = item.textContent.toLowerCase().includes(term) 
            ? 'block' 
            : 'none';
    });
});
</syntaxhighlight>

== 常见问题 ==
'''Q: 为什么我的事件监听器不工作？'''
A: 可能原因：
* 脚本在DOM加载前执行 → 将脚本放在body末尾或使用<code>DOMContentLoaded</code>事件
* 选择器错误 → 检查元素是否存在
* 动态生成元素未使用事件委托

'''Q: 如何移除事件监听器？'''
A: 使用<code>removeEventListener</code>，需保持函数引用：
<syntaxhighlight lang="javascript">
const handler = function() { console.log('只执行一次'); };
element.addEventListener('click', handler);
element.removeEventListener('click', handler);
</syntaxhighlight>

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

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

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript DOM]]