深入理解浏览器事件系统：从用户点击到事件对象的完整旅程

深入理解浏览器事件系统：从用户点击到事件对象的完整旅程

"当我点击页面按钮时，背后发生了什么？为什么回调函数能收到一个包含丰富信息的event对象？今天，让我们一起揭开浏览器事件系统的神秘面纱。"

一个令人困惑的现象

作为前端开发者，我们每天都在写这样的代码：

button.addEventListener('click', function(event) {
    console.log('点击位置:', event.clientX, event.clientY);
    console.log('触发元素:', event.target);
    console.log('事件类型:', event.type);
});

这段代码如此熟悉，以至于我们很少停下来思考：​​这个event对象到底从哪里来？它为什么能知道点击的精确坐标？为什么能识别是哪个元素被点击了？​​ 更神奇的是，当我们手动创建事件时：

const simulatedEvent = new MouseEvent('click', {
    clientX: 100,
    clientY: 200
});
button.dispatchEvent(simulatedEvent);

监听器居然无法区分这是"真实用户点击"还是"程序模拟点击"！ 这背后隐藏着浏览器事件系统的精妙设计。今天，就让我们一起来探索这个从物理点击到JavaScript事件对象的完整旅程。

第一阶段：物理世界的交互 → 浏览器内核的检测

想象一下这个场景：你的手指在手机屏幕上轻轻一点...

硬件层面的信号传递

你的手指触摸屏幕
    ↓
触摸传感器检测到压力变化  
    ↓
生成电信号传递给处理器
    ↓
操作系统识别为"点击事件"
    ↓
浏览器进程接收到系统事件

这个过程发生在毫秒级别，但对于浏览器来说，这只是一个开始。

浏览器的"事件工厂"开始工作

当浏览器内核接收到操作系统的点击信号后，它需要把这个"物理事件"翻译成"Web事件"。这时候，浏览器的​​事件构造系统​​开始运转：

// 浏览器内部的大致逻辑（简化版）
function processUserClick(nativeEvent) {
    // 1. 确定事件类型
    const eventType = 'click';
    
    // 2. 计算点击位置（相对视口的坐标）
    const clientX = calculateClientX(nativeEvent);
    const clientY = calculateClientY(nativeEvent);
    
    // 3. 确定目标元素（被点击的是哪个DOM元素）
    const targetElement = findTargetElement(clientX, clientY);
    
    // 4. 创建对应的事件对象
    const domEvent = new MouseEvent(eventType, {
        clientX: clientX,
        clientY: clientY, 
        button: nativeEvent.button,
        bubbles: true,
        target: targetElement
    });
    
    // 5. 开始事件派发流程
    dispatchEventToDOM(domEvent);
}

​​关键洞察​​：浏览器在这里扮演了"翻译官"的角色，把底层的系统事件翻译成Web开发者能理解的DOM事件。

第二阶段：事件对象的"家族树" - 理解继承体系

你可能不知道的是，浏览器内置了丰富的事件类型，它们构成了一个清晰的继承层次：

Event (所有事件的基类)
├── UIEvent (用户界面事件)
│   ├── FocusEvent (焦点事件：focus/blur)
│   ├── MouseEvent (鼠标事件：click/mousemove)
│   └── KeyboardEvent (键盘事件：keydown/keyup)
├── InputEvent (输入事件：input)
├── WheelEvent (滚轮事件：wheel)
└── CustomEvent (自定义事件)

为什么需要这么多事件类型？

因为​​不同的交互需要携带不同的信息​​：

// 鼠标点击需要坐标信息
const clickEvent = new MouseEvent('click', {
    clientX: 100,    // 点击的X坐标
    clientY: 200,    // 点击的Y坐标
    button: 0        // 哪个鼠标按键
});

// 键盘事件需要键位信息  
const keyEvent = new KeyboardEvent('keydown', {
    key: 'Enter',     // 按下的键
    code: 'Enter',    // 物理键位
    ctrlKey: true     // 是否按着Ctrl
});

// 输入事件需要文本信息
const inputEvent = new InputEvent('input', {
    data: 'hello',    // 输入的文本
    inputType: 'insertText'
});

这种设计体现了优秀的​​面向对象思想​​：把共性提取到基类（Event），把特性下放到子类。

验证事件对象的类型

你可以在浏览器控制台验证这个继承关系：

document.addEventListener('click', function(event) {
    console.log('事件构造函数:', event.constructor.name); // "MouseEvent"
    console.log('是MouseEvent吗?', event instanceof MouseEvent); // true
    console.log('是UIEvent吗?', event instanceof UIEvent); // true  
    console.log('是Event吗?', event instanceof Event); // true
    console.log('是用户真实操作?', event.isTrusted); // true
});

运行这段代码后点击页面，你会看到完整的事件类型继承链！

第三阶段：事件派发 - 从浏览器到你的回调函数

事件对象创建完成后，浏览器开始执行最精妙的部分：​​事件派发​​。

事件派发的工作流程

// 简化的派发逻辑
function dispatchEvent(targetElement, event) {
    // 1. 设置事件的目标元素
    event.target = targetElement;
    
    // 2. 捕获阶段：从window向下到目标元素
    if (event.eventPhase === Event.CAPTURING_PHASE) {
        executeCaptureHandlers(event);
    }
    
    // 3. 目标阶段：执行目标元素上的监听器
    targetElement._listeners.forEach(listener => {
        // 这就是魔法发生的地方！
        listener.call(targetElement, event);
    });
    
    // 4. 冒泡阶段：从目标元素向上到window
    if (event.bubbles && !event.propagationStopped) {
        executeBubbleHandlers(event);
    }
}

​​关键代码​ ​：listener.call(targetElement, event)- 这里浏览器调用我们的回调函数，并把精心构造的事件对象作为参数传入！

这就是为什么我们能收到event参数

现在回头看我们最开始的代码：

button.addEventListener('click', function(event) {
    // 这个event参数就是浏览器创建并传递过来的MouseEvent实例
    console.log(event.clientX); // 浏览器自动计算的坐标
    console.log(event.target);  // 被点击的按钮元素
});

整个过程可以类比为​​餐厅的点餐流程​​：

• ​顾客（用户）​：点击屏幕（点菜）
• ​服务员（浏览器）​：记录需求，创建订单（事件对象）
• ​厨师（你的回调函数）​：收到订单，开始烹饪（执行业务逻辑）

---

第四阶段：事件流的旅程 - 捕获与冒泡的奥秘

事件对象创建后，并不是直接调用你的回调函数，而是开始了一段精心设计的"DOM树之旅"。

事件流的三个阶段

// 完整的事件流包含三个阶段
document.addEventListener('click', function(event) {
    console.log('事件阶段:', event.eventPhase);
    // Event.CAPTURING_PHASE (1) - 捕获阶段
    // Event.AT_TARGET (2)       - 目标阶段  
    // Event.BUBBLING_PHASE (3)   - 冒泡阶段
}, true); // true表示在捕获阶段监听

可视化事件流

假设我们有这样的DOM结构：

<div id="grandparent">
    <div id="parent">
        <button id="child">点击我</button>
    </div>
</div>

当你点击按钮时，事件流是这样的：

捕获阶段 (1) : window → document → grandparent → parent
目标阶段 (2) : child (按钮元素)
冒泡阶段 (3) : child → parent → grandparent → document → window

实际验证事件流

<!DOCTYPE html>
<html>
<body>
    <div id="grandparent" style="padding: 50px; background: #f0f0f0;">
        <div id="parent" style="padding: 30px; background: #e0e0e0;">
            <button id="child" style="padding: 10px;">点击我查看事件流</button>
        </div>
    </div>

    <script>
        const elements = ['grandparent', 'parent', 'child'];
        
        elements.forEach(id => {
            const element = document.getElementById(id);
            
            // 捕获阶段监听（第三个参数为true）
            element.addEventListener('click', function(event) {
                console.log(`捕获阶段: ${id}`);
            }, true);
            
            // 冒泡阶段监听（默认）
            element.addEventListener('click', function(event) {
                console.log(`冒泡阶段: ${id}`);
            });
        });
    </script>
</body>
</html>

点击按钮后，控制台输出顺序：

捕获阶段: grandparent
捕获阶段: parent  
捕获阶段: child
冒泡阶段: child
冒泡阶段: parent
冒泡阶段: grandparent

第五阶段：手动创建事件 - 模拟用户交互的艺术

既然浏览器能自动创建事件，我们为什么还要手动创建呢？

1. 自动化测试：模拟真实用户行为

// 测试一个完整的登录流程
function testLoginFlow() {
    // 模拟用户输入用户名
    const usernameInput = document.getElementById('username');
    const inputEvent1 = new InputEvent('input', {
        inputType: 'insertText',
        data: 'testuser',
        bubbles: true
    });
    usernameInput.dispatchEvent(inputEvent1);
    
    // 模拟用户输入密码
    const passwordInput = document.getElementById('password');
    const inputEvent2 = new InputEvent('input', {
        inputType: 'insertText', 
        data: 'secret123',
        bubbles: true
    });
    passwordInput.dispatchEvent(inputEvent2);
    
    // 模拟点击登录按钮
    const loginButton = document.getElementById('login-btn');
    const clickEvent = new MouseEvent('click', {
        clientX: 100,
        clientY: 50,
        bubbles: true
    });
    loginButton.dispatchEvent(clickEvent);
    
    // 验证登录结果
    setTimeout(() => {
        expect(isLoggedIn).toBe(true);
    }, 1000);
}

2. 自定义组件通信

// 创建可复用的消息提示组件
class NotificationSystem extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <div class="notification">
                <slot></slot>
                <button id="close">×</button>
            </div>
        `;
    }
    
    connectedCallback() {
        this.shadowRoot.getElementById('close').addEventListener('click', () => {
            // 触发自定义事件通知父组件
            this.dispatchEvent(new CustomEvent('notification-close', {
                detail: { 
                    message: this.textContent,
                    timestamp: Date.now()
                },
                bubbles: true,
                composed: true  // 允许事件穿过Shadow DOM边界
            }));
        });
    }
}

customElements.define('notification-system', NotificationSystem);

// 使用组件
const notification = document.querySelector('notification-system');
notification.addEventListener('notification-close', (event) => {
    console.log('通知被关闭:', event.detail);
});

3. 功能演示和教程

// 创建交互式教程
class InteractiveTutorial {
    constructor() {
        this.steps = [];
        this.currentStep = 0;
    }
    
    addStep(description, element, eventType, eventConfig) {
        this.steps.push({ description, element, eventType, eventConfig });
    }
    
    play() {
        if (this.currentStep >= this.steps.length) return;
        
        const step = this.steps[this.currentStep];
        console.log(`教程步骤 ${this.currentStep + 1}: ${step.description}`);
        
        // 高亮目标元素
        this.highlightElement(step.element);
        
        // 模拟用户交互
        setTimeout(() => {
            const event = new step.eventType('click', step.eventConfig);
            step.element.dispatchEvent(event);
            
            this.currentStep++;
            this.play(); // 继续下一步
        }, 2000);
    }
    
    highlightElement(element) {
        element.style.transition = 'all 0.3s';
        element.style.boxShadow = '0 0 0 3px blue';
        setTimeout(() => element.style.boxShadow = '', 2000);
    }
}

// 使用教程系统
const tutorial = new InteractiveTutorial();
tutorial.addStep('点击登录按钮', loginButton, MouseEvent, { bubbles: true });
tutorial.addStep('输入用户名', usernameInput, InputEvent, { data: 'demo' });
tutorial.play();

第六阶段：事件委托 - 利用事件流的强大模式

理解了事件流之后，我们可以利用冒泡机制实现​​事件委托​​：

传统方式：为每个元素绑定事件

// 低效的做法
document.querySelectorAll('.delete-btn').forEach(button => {
    button.addEventListener('click', function() {
        this.parentElement.remove();
    });
});

// 动态添加的元素无法自动绑定事件

事件委托方式：利用冒泡机制

// 高效的事件委托
document.getElementById('item-list').addEventListener('click', function(event) {
    // 检查点击的是否是删除按钮
    if (event.target.classList.contains('delete-btn')) {
        event.target.closest('.item').remove();
    }
    
    // 检查点击的是否是编辑按钮
    if (event.target.classList.contains('edit-btn')) {
        const itemId = event.target.dataset.id;
        editItem(itemId);
    }
});

// 现在，即使是动态添加的元素也能正常处理事件！
function addNewItem(content) {
    const item = document.createElement('div');
    item.className = 'item';
    item.innerHTML = `
        <span>${content}</span>
        <button class="delete-btn">删除</button>
        <button class="edit-btn" data-id="${Date.now()}">编辑</button>
    `;
    document.getElementById('item-list').appendChild(item);
    // 不需要额外绑定事件！
}

事件委托的优势

1. ​内存效率​：只需要一个事件监听器
2. ​动态元素支持​：自动处理后续添加的元素
3. ​性能更好​：减少事件监听器数量
4. ​代码简洁​：逻辑集中在一个地方

第七阶段：现代框架中的事件系统

虽然React、Vue等框架提供了更高级的事件API，但底层仍然基于原生事件系统：

React中的合成事件（SyntheticEvent）

function MyComponent() {
    const handleClick = (event) => {
        // React包装过的事件对象
        console.log(event.nativeEvent); // 真正的原生事件
        
        // React添加了跨浏览器兼容性
        event.persist(); // 阻止事件池回收
    };
    
    return (
        <button onClick={handleClick}>
            点击我
        </button>
    );
}

Vue中的事件处理

<template>
    <button @click="handleClick">
        点击我
    </button>
</template>

<script>
export default {
    methods: {
        handleClick(event) {
            // Vue使用原生事件，但提供了更简洁的语法
            console.log(event instanceof MouseEvent); // true
            
            // Vue的事件修饰符
            // @click.stop = event.stopPropagation()
            // @click.prevent = event.preventDefault()
        }
    }
}
</script>

性能优化与最佳实践

1. 避免内存泄漏

// 错误：匿名函数无法移除
element.addEventListener('click', function() {
    console.log('clicked');
});

// 正确：使用具名函数
function handleClick() {
    console.log('clicked');
}

element.addEventListener('click', handleClick);
// 需要时移除
element.removeEventListener('click', handleClick);

2. 使用被动事件监听器

// 改善滚动性能
document.addEventListener('touchmove', function(event) {
    // 不会调用preventDefault()，浏览器可以优化滚动
}, { passive: true });

// 传统方式需要检测是否调用了preventDefault
document.addEventListener('touchmove', function(event) {
    // 浏览器需要等待这个函数执行完才知道是否要阻止滚动
}, { passive: false }); // 默认值

3. 防抖和节流

// 节流：确保函数在指定时间间隔内只执行一次
function throttle(func, delay) {
    let lastCall = 0;
    return function(...args) {
        const now = Date.now();
        if (now - lastCall < delay) return;
        lastCall = now;
        return func.apply(this, args);
    };
}

// 防抖：在事件停止触发后执行
function debounce(func, delay) {
    let timeoutId;
    return function(...args) {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => func.apply(this, args), delay);
    };
}

// 使用示例
window.addEventListener('resize', throttle(() => {
    console.log('窗口大小改变');
}, 100));

searchInput.addEventListener('input', debounce((event) => {
    search(event.target.value);
}, 300));

---

第八阶段：自定义事件 - 超越浏览器内置事件

当浏览器内置的事件类型无法满足需求时，我们可以创建​​自定义事件​​，这是事件系统最强大的扩展能力。

基础自定义事件

// 创建简单的自定义事件
const taskCompletedEvent = new CustomEvent('taskCompleted', {
    detail: {
        taskId: 'task-123',
        completionTime: new Date(),
        result: 'success'
    },
    bubbles: true,
    cancelable: true
});

// 派发事件
document.getElementById('task-manager').dispatchEvent(taskCompletedEvent);

// 监听事件
document.addEventListener('taskCompleted', function(event) {
    console.log('任务完成:', event.detail);
    // 输出: {taskId: 'task-123', completionTime: Date, result: 'success'}
});

创建事件子类（高级用法）

// 扩展CustomEvent创建特定领域的事件
class PaymentEvent extends CustomEvent {
    constructor(type, paymentDetail) {
        super(type, {
            detail: {
                amount: paymentDetail.amount,
                currency: paymentDetail.currency,
                method: paymentDetail.method,
                timestamp: new Date()
            },
            bubbles: true
        });
    }
    
    // 添加自定义方法
    formatAmount() {
        return `${this.detail.amount} ${this.detail.currency}`;
    }
}

// 使用自定义事件类
const paymentEvent = new PaymentEvent('paymentProcessed', {
    amount: 99.99,
    currency: 'USD',
    method: 'credit_card'
});

// 派发事件
paymentButton.dispatchEvent(paymentEvent);

// 监听时可以使用自定义方法
paymentButton.addEventListener('paymentProcessed', function(event) {
    console.log(`支付金额: ${event.formatAmount()}`); // "支付金额: 99.99 USD"
    console.log('支付方式:', event.detail.method);     // "支付方式: credit_card"
});

实际应用：微前端架构中的事件通信

// 主应用 - 事件总线
class MainAppEventBus {
    constructor() {
        this.eventTarget = new EventTarget();
    }
    
    // 发布全局事件
    publish(eventType, data) {
        const event = new CustomEvent(eventType, {
            detail: data,
            bubbles: false // 微前端中通常不需要冒泡
        });
        this.eventTarget.dispatchEvent(event);
    }
    
    // 订阅全局事件
    subscribe(eventType, callback) {
        this.eventTarget.addEventListener(eventType, (event) => {
            callback(event.detail);
        });
    }
}

// 在各个微应用中使用
const eventBus = new MainAppEventBus();

// 用户微应用
class UserApp {
    login(user) {
        // 登录成功后发布全局事件
        eventBus.publish('userLoggedIn', {
            user: user,
            timestamp: Date.now(),
            source: 'user-app'
        });
    }
}

// 购物车微应用
class CartApp {
    constructor() {
        // 订阅用户登录事件
        eventBus.subscribe('userLoggedIn', (data) => {
            this.loadUserCart(data.user.id);
        });
    }
    
    loadUserCart(userId) {
        console.log(`为用户 ${userId} 加载购物车`);
    }
}

第九阶段：事件性能优化与内存管理

1. 事件委托的性能优势

// 性能对比测试
function testPerformance() {
    const container = document.getElementById('container');
    const itemCount = 1000;
    
    // 创建1000个列表项
    for (let i = 0; i < itemCount; i++) {
        const item = document.createElement('div');
        item.className = 'list-item';
        item.textContent = `项目 ${i}`;
        container.appendChild(item);
    }
    
    // 方法1：为每个元素绑定事件（性能差）
    console.time('单独绑定');
    document.querySelectorAll('.list-item').forEach(item => {
        item.addEventListener('click', function() {
            console.log('点击了:', this.textContent);
        });
    });
    console.timeEnd('单独绑定'); // 约 15-20ms
    
    // 方法2：事件委托（性能好）
    console.time('事件委托');
    container.addEventListener('click', function(event) {
        if (event.target.classList.contains('list-item')) {
            console.log('点击了:', event.target.textContent);
        }
    });
    console.timeEnd('事件委托'); // 约 1-2ms
}

2. 被动事件监听器（Passive Event Listeners）

// 改善滚动性能
document.addEventListener('touchstart', function(event) {
    // 即使我们不调用preventDefault()，浏览器也要等待检查
    // 这会导致滚动卡顿
});

// 使用被动事件监听器改善性能
document.addEventListener('touchstart', function(event) {
    // 告诉浏览器我们不会阻止默认行为
    // 浏览器可以立即开始滚动，无需等待
}, { passive: true });

// 检测浏览器是否支持被动事件
let passiveSupported = false;
try {
    const options = Object.defineProperty({}, 'passive', {
        get: function() {
            passiveSupported = true;
            return true;
        }
    });
    window.addEventListener('test', null, options);
} catch (err) {}

3. 一次性事件监听器

// 传统方式：需要手动移除
function handleFirstClick() {
    console.log('第一次点击');
    document.removeEventListener('click', handleFirstClick);
}
document.addEventListener('click', handleFirstClick);

// 现代方式：使用once选项
document.addEventListener('click', function() {
    console.log('这个监听器会自动移除');
}, { once: true });

// 实际应用：模态框关闭后自动清理
function showModal() {
    const modal = document.createElement('div');
    modal.innerHTML = '点击任意位置关闭';
    document.body.appendChild(modal);
    
    // 点击任意位置关闭模态框，且自动移除监听器
    document.addEventListener('click', function closeModal() {
        modal.remove();
    }, { once: true });
}

第十阶段：跨浏览器兼容性处理

1. 事件对象的标准化

// 兼容不同浏览器的事件对象获取
function getEvent(event) {
    return event || window.event; // IE兼容
}

// 兼容性事件处理函数
function addCrossBrowserEventListener(element, eventType, handler) {
    if (element.addEventListener) {
        // 标准浏览器
        element.addEventListener(eventType, handler, false);
    } else if (element.attachEvent) {
        // IE 8及以下
        element.attachEvent('on' + eventType, function(event) {
            // 标准化事件对象
            event = event || window.event;
            event.target = event.target || event.srcElement;
            event.preventDefault = event.preventDefault || function() {
                this.returnValue = false;
            };
            event.stopPropagation = event.stopPropagation || function() {
                this.cancelBubble = true;
            };
            
            handler.call(element, event);
        });
    } else {
        // 最老的方式
        element['on' + eventType] = handler;
    }
}

// 使用示例
addCrossBrowserEventListener(document, 'click', function(event) {
    event = getEvent(event);
    console.log('点击目标:', event.target);
});

2. 自定义事件的兼容性处理

// 兼容老浏览器的CustomEvent
(function() {
    if (typeof window.CustomEvent === "function") return;
    
    function CustomEvent(event, params) {
        params = params || { bubbles: false, cancelable: false, detail: null };
        const evt = document.createEvent('CustomEvent');
        evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
        return evt;
    }
    
    CustomEvent.prototype = window.Event.prototype;
    window.CustomEvent = CustomEvent;
})();

第十一阶段：实际项目中的事件架构模式

1. 发布-订阅模式（Pub/Sub）

class EventSystem {
    constructor() {
        this.events = new Map();
    }
    
    // 订阅事件
    on(eventName, callback, options = {}) {
        if (!this.events.has(eventName)) {
            this.events.set(eventName, []);
        }
        
        const handlers = this.events.get(eventName);
        const handler = {
            callback,
            once: options.once || false,
            context: options.context || null
        };
        
        handlers.push(handler);
        
        // 返回取消订阅的函数
        return () => this.off(eventName, callback);
    }
    
    // 发布事件
    emit(eventName, data) {
        if (!this.events.has(eventName)) return;
        
        const handlers = this.events.get(eventName);
        const remainingHandlers = [];
        
        handlers.forEach(handler => {
            // 执行回调
            handler.callback.call(handler.context, data);
            
            // 如果不是一次性事件，保留处理器
            if (!handler.once) {
                remainingHandlers.push(handler);
            }
        });
        
        this.events.set(eventName, remainingHandlers);
    }
    
    // 取消订阅
    off(eventName, callback) {
        if (!this.events.has(eventName)) return;
        
        const handlers = this.events.get(eventName);
        const filteredHandlers = handlers.filter(
            handler => handler.callback !== callback
        );
        
        this.events.set(eventName, filteredHandlers);
    }
}

// 在React/Vue组件中使用
const eventSystem = new EventSystem();

// 组件A发布事件
eventSystem.emit('userProfileUpdated', {
    userId: '123',
    newName: '张三'
});

// 组件B订阅事件
const unsubscribe = eventSystem.on('userProfileUpdated', (data) => {
    console.log('用户信息更新:', data);
    // 更新组件状态
    this.setState({ userName: data.newName });
});

// 组件卸载时取消订阅
// unsubscribe();

2. 命令模式与事件结合

// 命令模式：将操作封装为可撤销的命令
class Command {
    constructor(execute, undo, name) {
        this.execute = execute;
        this.undo = undo;
        this.name = name;
    }
}

// 命令管理器
class CommandManager {
    constructor() {
        this.history = [];
        this.redoStack = [];
    }
    
    execute(command) {
        command.execute();
        this.history.push(command);
        this.redoStack = []; // 清空重做栈
        
        // 发布命令执行事件
        this.emit('commandExecuted', { command, type: 'execute' });
    }
    
    undo() {
        if (this.history.length === 0) return;
        
        const command = this.history.pop();
        command.undo();
        this.redoStack.push(command);
        
        this.emit('commandUndone', { command, type: 'undo' });
    }
    
    redo() {
        if (this.redoStack.length === 0) return;
        
        const command = this.redoStack.pop();
        command.execute();
        this.history.push(command);
        
        this.emit('commandRedone', { command, type: 'redo' });
    }
}

// 使用示例
const commandManager = new CommandManager();

// 创建文本编辑命令
const textEditCommand = new Command(
    () => { /* 执行文本编辑 */ },
    () => { /* 撤销文本编辑 */ },
    'edit-text'
);

// 监听命令事件
commandManager.on('commandExecuted', (event) => {
    updateUI(); // 更新界面
    saveState(); // 保存状态
});

第十二阶段：调试与监控

1. 事件监听器调试

// 获取元素上的所有事件监听器（在控制台中使用）
function getEventListeners(element) {
    const listeners = {};
    const eventTypes = ['click', 'mouseover', 'keydown', 'input']; // 常见事件类型
    
    eventTypes.forEach(eventType => {
        // 获取事件监听器（需要浏览器开发者工具支持）
        const elementListeners = getEventListeners?.(element)?.[eventType];
        if (elementListeners && elementListeners.length > 0) {
            listeners[eventType] = elementListeners.map(listener => ({
                listener: listener.listener,
                useCapture: listener.useCapture,
                passive: listener.passive
            }));
        }
    });
    
    return listeners;
}

// 监控事件派发
function monitorEvents(element, eventTypes) {
    eventTypes.forEach(eventType => {
        element.addEventListener(eventType, function(event) {
            console.log(`事件监控 [${eventType}]:`, {
                target: event.target,
                currentTarget: event.currentTarget,
                timestamp: event.timeStamp,
                detail: event.detail
            });
        }, true); // 使用捕获阶段确保监控所有事件
    });
}

// 使用示例
monitorEvents(document, ['click', 'keydown', 'input']);

2. 性能监控

// 监控事件处理性能
class EventPerformanceMonitor {
    constructor() {
        this.metrics = new Map();
    }
    
    wrapEventListener(element, eventType, originalHandler) {
        return function performanceWrappedHandler(event) {
            const startTime = performance.now();
            
            // 执行原始处理函数
            const result = originalHandler.call(this, event);
            
            const endTime = performance.now();
            const duration = endTime - startTime;
            
            // 记录性能数据
            const key = `${eventType}-${originalHandler.name}`;
            if (!this.metrics.has(key)) {
                this.metrics.set(key, []);
            }
            this.metrics.get(key).push(duration);
            
            // 如果处理时间过长，发出警告
            if (duration > 16) { // 超过一帧的时间（16ms）
                console.warn(`事件处理耗时过长: ${duration}ms`, {
                    eventType,
                    handler: originalHandler.name,
                    target: event.target
                });
            }
            
            return result;
        };
    }
    
    getMetrics() {
        return Array.from(this.metrics.entries()).map(([key, durations]) => ({
            event: key,
            callCount: durations.length,
            averageTime: durations.reduce((a, b) => a + b, 0) / durations.length,
            maxTime: Math.max(...durations)
        }));
    }
}

// 使用性能监控
const monitor = new EventPerformanceMonitor();
const originalClickHandler = function handleClick() { /* ... */ };
element.addEventListener('click', monitor.wrapEventListener(element, 'click', originalClickHandler));

---