程序猿指南
Search K

Appearance

事件流机制详解2024：前端开发者掌握JavaScript事件流完整指南 ​

📊 SEO元描述：2024年最新JavaScript事件流机制教程，详解事件冒泡、事件捕获、事件委托原理和应用。包含完整代码示例，适合前端开发者快速掌握事件流控制技能。

核心关键词：JavaScript事件流2024、事件冒泡、事件捕获、事件委托、JavaScript事件传播

长尾关键词：JavaScript事件流机制、事件冒泡怎么理解、事件委托怎么实现、事件捕获和冒泡区别、JavaScript事件传播

📚 JavaScript事件流学习目标与核心收获 ​

通过本节事件流机制详解，你将系统性掌握：

  • ✅ 事件冒泡机制：深入理解事件从目标元素向上传播的过程
  • ✅ 事件捕获机制：掌握事件从根元素向下传播的原理
  • ✅ 事件委托技术：学会利用事件流实现高效的事件处理
  • ✅ 事件流控制：熟练控制事件在不同阶段的处理
  • ✅ 性能优化应用：掌握事件委托的性能优势和最佳实践
  • ✅ 实际应用场景：学会在复杂项目中应用事件流机制

🎯 适合人群 ​

  • 前端开发进阶者的事件流机制深度学习
  • JavaScript开发者的事件处理优化需求
  • Web应用架构师的事件系统设计和优化
  • 高级前端工程师的性能优化和问题解决

🌟 JavaScript事件流是什么？为什么如此重要？ ​

JavaScript事件流是什么？这是前端开发中最核心的机制之一。事件流描述了事件在DOM树中传播的完整过程，也是高效事件处理和性能优化的基础。

JavaScript事件流的核心优势 ​

  • 🎯 统一的事件模型：提供标准化的事件传播机制
  • 🔧 灵活的事件处理：支持在不同阶段处理事件
  • 💡 性能优化基础：事件委托等优化技术的理论基础
  • 📚 代码组织优化：更好的事件处理代码结构
  • 🚀 扩展性增强：支持复杂的事件处理需求

💡 学习建议：事件流是前端开发的核心概念，建议重点掌握事件委托技术，它是性能优化的重要手段

事件冒泡：从内向外的传播机制 ​

事件冒泡的工作原理 ​

事件冒泡是指事件从最具体的元素（目标元素）开始，逐级向上传播到最不具体的元素（通常是document）：

javascript
// 🎉 事件冒泡完整演示
class EventBubblingDemo {
    constructor() {
        this.setupBubblingExample();
        this.demonstrateBubblingBehavior();
        this.showBubblingControl();
    }
    
    setupBubblingExample() {
        // 创建嵌套的DOM结构来演示冒泡
        this.createNestedStructure();
        
        // 在每个层级添加事件监听器
        const elements = [
            { selector: '#document-level', name: 'Document' },
            { selector: '#html-level', name: 'HTML' },
            { selector: '#body-level', name: 'Body' },
            { selector: '#container-level', name: 'Container' },
            { selector: '#parent-level', name: 'Parent' },
            { selector: '#child-level', name: 'Child' },
            { selector: '#target-level', name: 'Target' }
        ];
        
        elements.forEach(({ selector, name }) => {
            const element = document.querySelector(selector);
            if (element) {
                element.addEventListener('click', (event) => {
                    console.log(`🔼 冒泡阶段: ${name} 处理事件`);
                    console.log(`   目标元素: ${event.target.id}`);
                    console.log(`   当前元素: ${event.currentTarget.id}`);
                    console.log(`   事件阶段: ${this.getEventPhase(event.eventPhase)}`);
                    console.log('---');
                });
            }
        });
    }
    
    createNestedStructure() {
        const structure = `
            <div id="container-level" style="padding: 20px; border: 2px solid blue; background: lightblue;">
                Container
                <div id="parent-level" style="padding: 20px; border: 2px solid green; background: lightgreen;">
                    Parent
                    <div id="child-level" style="padding: 20px; border: 2px solid orange; background: lightyellow;">
                        Child
                        <button id="target-level" style="padding: 10px; border: 2px solid red; background: lightcoral;">
                            Target Button
                        </button>
                    </div>
                </div>
            </div>
        `;
        
        const container = document.querySelector('#bubbling-demo');
        if (container) {
            container.innerHTML = structure;
        }
    }
    
    demonstrateBubblingBehavior() {
        // 演示冒泡的实际应用
        const list = document.querySelector('#bubbling-list');
        
        // 在列表容器上添加事件监听器（利用冒泡）
        list.addEventListener('click', (event) => {
            console.log('=== 冒泡应用示例 ===');
            
            // 检查点击的元素类型
            if (event.target.matches('li')) {
                console.log('点击了列表项:', event.target.textContent);
                event.target.style.backgroundColor = 'yellow';
            }
            
            if (event.target.matches('.edit-btn')) {
                console.log('点击了编辑按钮');
                const listItem = event.target.closest('li');
                this.editListItem(listItem);
            }
            
            if (event.target.matches('.delete-btn')) {
                console.log('点击了删除按钮');
                const listItem = event.target.closest('li');
                this.deleteListItem(listItem);
            }
        });
        
        // 动态添加列表项（新项目自动具有事件处理能力）
        this.addDynamicListItems(list);
    }
    
    showBubblingControl() {
        // 演示如何控制冒泡行为
        const controlDemo = document.querySelector('#bubbling-control');
        
        // 父元素监听器
        controlDemo.addEventListener('click', (event) => {
            console.log('父元素处理事件');
        });
        
        // 子元素监听器 - 正常冒泡
        const normalButton = controlDemo.querySelector('#normal-bubble');
        normalButton.addEventListener('click', (event) => {
            console.log('子元素处理事件 - 允许冒泡');
        });
        
        // 子元素监听器 - 阻止冒泡
        const stopButton = controlDemo.querySelector('#stop-bubble');
        stopButton.addEventListener('click', (event) => {
            console.log('子元素处理事件 - 阻止冒泡');
            event.stopPropagation(); // 阻止事件继续冒泡
        });
        
        // 演示条件性冒泡控制
        const conditionalButton = controlDemo.querySelector('#conditional-bubble');
        conditionalButton.addEventListener('click', (event) => {
            console.log('条件性冒泡控制');
            
            // 按住Ctrl键时阻止冒泡
            if (event.ctrlKey) {
                event.stopPropagation();
                console.log('按住Ctrl键，阻止冒泡');
            } else {
                console.log('允许冒泡到父元素');
            }
        });
    }
    
    addDynamicListItems(list) {
        const addButton = document.querySelector('#add-item-btn');
        let itemCount = 0;
        
        addButton.addEventListener('click', () => {
            itemCount++;
            const li = document.createElement('li');
            li.innerHTML = `
                项目 ${itemCount}
                <button class="edit-btn">编辑</button>
                <button class="delete-btn">删除</button>
            `;
            li.style.cssText = `
                padding: 10px;
                margin: 5px 0;
                border: 1px solid #ddd;
                background: #f9f9f9;
            `;
            
            list.appendChild(li);
            console.log(`添加了新项目 ${itemCount}，自动具有事件处理能力`);
        });
    }
    
    editListItem(listItem) {
        const currentText = listItem.firstChild.textContent.trim();
        const newText = prompt('编辑项目名称:', currentText);
        
        if (newText && newText !== currentText) {
            listItem.firstChild.textContent = newText + ' ';
            console.log(`项目已更新: ${newText}`);
        }
    }
    
    deleteListItem(listItem) {
        if (confirm('确定要删除这个项目吗？')) {
            listItem.remove();
            console.log('项目已删除');
        }
    }
    
    getEventPhase(phase) {
        const phases = {
            0: 'NONE',
            1: 'CAPTURING_PHASE',
            2: 'AT_TARGET',
            3: 'BUBBLING_PHASE'
        };
        return phases[phase] || 'UNKNOWN';
    }
}

// 创建事件冒泡演示实例
const bubblingDemo = new EventBubblingDemo();

事件捕获：从外向内的传播机制 ​

事件捕获的工作原理 ​

事件捕获是指事件从最不具体的元素（document）开始，逐级向下传播到最具体的元素（目标元素）：

javascript
// 🎉 事件捕获完整演示
class EventCapturingDemo {
    constructor() {
        this.setupCapturingExample();
        this.demonstrateCapturingVsBubbling();
        this.showCapturingApplications();
    }
    
    setupCapturingExample() {
        // 创建演示结构
        const structure = `
            <div id="capture-container" style="padding: 20px; border: 2px solid purple; background: lavender;">
                Capture Container
                <div id="capture-parent" style="padding: 20px; border: 2px solid blue; background: lightblue;">
                    Capture Parent
                    <div id="capture-child" style="padding: 20px; border: 2px solid green; background: lightgreen;">
                        Capture Child
                        <button id="capture-target" style="padding: 10px; border: 2px solid red; background: lightcoral;">
                            Capture Target
                        </button>
                    </div>
                </div>
            </div>
        `;
        
        const container = document.querySelector('#capturing-demo');
        if (container) {
            container.innerHTML = structure;
        }
        
        // 在捕获阶段添加事件监听器
        const elements = [
            { selector: '#capture-container', name: 'Container' },
            { selector: '#capture-parent', name: 'Parent' },
            { selector: '#capture-child', name: 'Child' },
            { selector: '#capture-target', name: 'Target' }
        ];
        
        elements.forEach(({ selector, name }) => {
            const element = document.querySelector(selector);
            if (element) {
                // 捕获阶段监听器（第三个参数为true）
                element.addEventListener('click', (event) => {
                    console.log(`🔽 捕获阶段: ${name} 处理事件`);
                    console.log(`   目标元素: ${event.target.id}`);
                    console.log(`   当前元素: ${event.currentTarget.id}`);
                    console.log(`   事件阶段: ${this.getEventPhase(event.eventPhase)}`);
                }, true);
            }
        });
    }
    
    demonstrateCapturingVsBubbling() {
        // 同时演示捕获和冒泡
        const demoElement = document.querySelector('#capture-bubble-demo');
        
        if (demoElement) {
            // 捕获阶段监听器
            demoElement.addEventListener('click', (event) => {
                console.log('🔽 捕获阶段监听器执行');
            }, true);
            
            // 冒泡阶段监听器
            demoElement.addEventListener('click', (event) => {
                console.log('🔼 冒泡阶段监听器执行');
            }, false);
            
            // 目标阶段监听器
            demoElement.addEventListener('click', (event) => {
                console.log('🎯 目标阶段监听器执行');
                console.log('完整的事件流程：捕获 → 目标 → 冒泡');
            });
        }
    }
    
    showCapturingApplications() {
        // 捕获阶段的实际应用场景
        console.log('=== 事件捕获的应用场景 ===');
        
        // 1. 全局事件拦截
        this.setupGlobalEventInterception();
        
        // 2. 事件预处理
        this.setupEventPreprocessing();
        
        // 3. 权限控制
        this.setupPermissionControl();
    }
    
    setupGlobalEventInterception() {
        // 在document级别拦截所有点击事件
        document.addEventListener('click', (event) => {
            // 记录所有点击事件
            console.log('全局点击拦截:', {
                target: event.target.tagName,
                id: event.target.id,
                className: event.target.className,
                timestamp: new Date().toISOString()
            });
            
            // 可以在这里添加全局分析、日志记录等
        }, true);
    }
    
    setupEventPreprocessing() {
        const form = document.querySelector('#preprocessing-form');
        
        if (form) {
            // 在捕获阶段预处理表单事件
            form.addEventListener('submit', (event) => {
                console.log('🔽 捕获阶段：表单提交预处理');
                
                // 添加提交时间戳
                const timestampInput = document.createElement('input');
                timestampInput.type = 'hidden';
                timestampInput.name = 'submitTimestamp';
                timestampInput.value = Date.now().toString();
                form.appendChild(timestampInput);
                
                // 添加用户代理信息
                const userAgentInput = document.createElement('input');
                userAgentInput.type = 'hidden';
                userAgentInput.name = 'userAgent';
                userAgentInput.value = navigator.userAgent;
                form.appendChild(userAgentInput);
                
                console.log('表单预处理完成');
            }, true);
        }
    }
    
    setupPermissionControl() {
        const restrictedArea = document.querySelector('#restricted-area');
        
        if (restrictedArea) {
            // 在捕获阶段进行权限检查
            restrictedArea.addEventListener('click', (event) => {
                console.log('🔽 捕获阶段：权限检查');
                
                // 模拟权限检查
                const hasPermission = this.checkUserPermission();
                
                if (!hasPermission) {
                    event.stopPropagation(); // 阻止事件继续传播
                    event.preventDefault();   // 阻止默认行为
                    
                    console.log('❌ 权限不足，阻止操作');
                    alert('您没有权限执行此操作');
                    return;
                }
                
                console.log('✅ 权限检查通过');
            }, true);
        }
    }
    
    checkUserPermission() {
        // 模拟权限检查逻辑
        return Math.random() > 0.3; // 70%的概率有权限
    }
    
    getEventPhase(phase) {
        const phases = {
            0: 'NONE',
            1: 'CAPTURING_PHASE',
            2: 'AT_TARGET',
            3: 'BUBBLING_PHASE'
        };
        return phases[phase] || 'UNKNOWN';
    }
}

// 创建事件捕获演示实例
const capturingDemo = new EventCapturingDemo();

事件委托：高效的事件处理模式 ​

事件委托的核心原理和优势 ​

事件委托利用事件冒泡机制，在父元素上监听子元素的事件，是性能优化的重要技术：

javascript
// 🎉 事件委托完整实现指南
class EventDelegationDemo {
    constructor() {
        this.setupBasicDelegation();
        this.demonstratePerformanceBenefits();
        this.createAdvancedDelegationSystem();
    }
    
    setupBasicDelegation() {
        // 基本的事件委托示例
        const todoList = document.querySelector('#todo-list');
        
        // 在父元素上监听所有子元素的事件
        todoList.addEventListener('click', (event) => {
            console.log('=== 事件委托处理 ===');
            
            // 根据点击的元素类型执行不同操作
            if (event.target.matches('.todo-item')) {
                this.toggleTodoItem(event.target);
            }
            
            if (event.target.matches('.edit-btn')) {
                this.editTodoItem(event.target.closest('.todo-item'));
            }
            
            if (event.target.matches('.delete-btn')) {
                this.deleteTodoItem(event.target.closest('.todo-item'));
            }
            
            if (event.target.matches('.priority-btn')) {
                this.togglePriority(event.target.closest('.todo-item'));
            }
        });
        
        // 添加新的待办事项
        this.setupTodoCreation(todoList);
    }
    
    setupTodoCreation(todoList) {
        const addButton = document.querySelector('#add-todo-btn');
        const todoInput = document.querySelector('#todo-input');
        let todoId = 0;
        
        const addTodo = () => {
            const text = todoInput.value.trim();
            if (!text) return;
            
            todoId++;
            const todoItem = document.createElement('div');
            todoItem.className = 'todo-item';
            todoItem.dataset.id = todoId;
            todoItem.innerHTML = `
                <span class="todo-text">${text}</span>
                <button class="edit-btn">编辑</button>
                <button class="delete-btn">删除</button>
                <button class="priority-btn">优先级</button>
            `;
            todoItem.style.cssText = `
                padding: 10px;
                margin: 5px 0;
                border: 1px solid #ddd;
                background: #f9f9f9;
                display: flex;
                justify-content: space-between;
                align-items: center;
            `;
            
            todoList.appendChild(todoItem);
            todoInput.value = '';
            
            console.log(`添加了新的待办事项 ${todoId}，自动具有事件委托能力`);
        };
        
        addButton.addEventListener('click', addTodo);
        todoInput.addEventListener('keypress', (event) => {
            if (event.key === 'Enter') {
                addTodo();
            }
        });
    }
    
    toggleTodoItem(item) {
        item.classList.toggle('completed');
        const isCompleted = item.classList.contains('completed');
        item.style.opacity = isCompleted ? '0.6' : '1';
        item.style.textDecoration = isCompleted ? 'line-through' : 'none';
        
        console.log(`待办事项 ${item.dataset.id} ${isCompleted ? '已完成' : '未完成'}`);
    }
    
    editTodoItem(item) {
        const textSpan = item.querySelector('.todo-text');
        const currentText = textSpan.textContent;
        const newText = prompt('编辑待办事项:', currentText);
        
        if (newText && newText !== currentText) {
            textSpan.textContent = newText;
            console.log(`待办事项 ${item.dataset.id} 已更新: ${newText}`);
        }
    }
    
    deleteTodoItem(item) {
        if (confirm('确定要删除这个待办事项吗？')) {
            const id = item.dataset.id;
            item.remove();
            console.log(`待办事项 ${id} 已删除`);
        }
    }
    
    togglePriority(item) {
        const isPriority = item.classList.toggle('priority');
        item.style.backgroundColor = isPriority ? '#ffeb3b' : '#f9f9f9';
        item.style.fontWeight = isPriority ? 'bold' : 'normal';
        
        console.log(`待办事项 ${item.dataset.id} ${isPriority ? '设为' : '取消'}优先级`);
    }
    
    demonstratePerformanceBenefits() {
        console.log('=== 事件委托性能优势演示 ===');
        
        // 创建大量元素来演示性能差异
        const container1 = document.querySelector('#performance-test-1');
        const container2 = document.querySelector('#performance-test-2');
        
        const itemCount = 1000;
        
        // 方法1：为每个元素单独绑定事件（低效）
        console.time('单独绑定事件');
        for (let i = 0; i < itemCount; i++) {
            const item = document.createElement('div');
            item.textContent = `项目 ${i + 1}`;
            item.className = 'performance-item';
            
            // 每个元素都绑定事件监听器
            item.addEventListener('click', (event) => {
                console.log(`单独绑定：点击了项目 ${i + 1}`);
            });
            
            container1.appendChild(item);
        }
        console.timeEnd('单独绑定事件');
        
        // 方法2：使用事件委托（高效）
        console.time('事件委托');
        
        // 只在父元素上绑定一个事件监听器
        container2.addEventListener('click', (event) => {
            if (event.target.matches('.performance-item')) {
                const index = Array.from(container2.children).indexOf(event.target) + 1;
                console.log(`事件委托：点击了项目 ${index}`);
            }
        });
        
        // 创建大量元素
        for (let i = 0; i < itemCount; i++) {
            const item = document.createElement('div');
            item.textContent = `项目 ${i + 1}`;
            item.className = 'performance-item';
            container2.appendChild(item);
        }
        console.timeEnd('事件委托');
        
        console.log(`事件委托方式只使用了1个事件监听器，而单独绑定使用了${itemCount}个`);
    }
    
    createAdvancedDelegationSystem() {
        // 高级事件委托系统
        class AdvancedEventDelegation {
            constructor(container) {
                this.container = container;
                this.handlers = new Map();
                this.setupDelegation();
            }
            
            // 注册事件处理器
            on(selector, eventType, handler) {
                const key = `${selector}:${eventType}`;
                if (!this.handlers.has(key)) {
                    this.handlers.set(key, []);
                }
                this.handlers.get(key).push(handler);
                
                console.log(`注册事件处理器: ${key}`);
            }
            
            // 移除事件处理器
            off(selector, eventType, handler) {
                const key = `${selector}:${eventType}`;
                const handlers = this.handlers.get(key);
                
                if (handlers) {
                    const index = handlers.indexOf(handler);
                    if (index !== -1) {
                        handlers.splice(index, 1);
                        console.log(`移除事件处理器: ${key}`);
                    }
                }
            }
            
            // 设置事件委托
            setupDelegation() {
                this.container.addEventListener('click', (event) => {
                    this.handleEvent(event, 'click');
                });
                
                this.container.addEventListener('change', (event) => {
                    this.handleEvent(event, 'change');
                });
                
                this.container.addEventListener('input', (event) => {
                    this.handleEvent(event, 'input');
                });
            }
            
            // 处理事件
            handleEvent(event, eventType) {
                for (const [key, handlers] of this.handlers) {
                    const [selector, type] = key.split(':');
                    
                    if (type === eventType && event.target.matches(selector)) {
                        handlers.forEach(handler => {
                            handler.call(event.target, event);
                        });
                    }
                }
            }
            
            // 获取统计信息
            getStats() {
                console.log('=== 事件委托统计 ===');
                for (const [key, handlers] of this.handlers) {
                    console.log(`${key}: ${handlers.length} 个处理器`);
                }
            }
        }
        
        // 使用高级事件委托系统
        const advancedContainer = document.querySelector('#advanced-delegation');
        if (advancedContainer) {
            const delegation = new AdvancedEventDelegation(advancedContainer);
            
            // 注册各种事件处理器
            delegation.on('.btn-primary', 'click', function(event) {
                console.log('主要按钮被点击:', this.textContent);
            });
            
            delegation.on('.btn-secondary', 'click', function(event) {
                console.log('次要按钮被点击:', this.textContent);
            });
            
            delegation.on('input[type="text"]', 'input', function(event) {
                console.log('文本输入:', this.value);
            });
            
            delegation.on('select', 'change', function(event) {
                console.log('选择改变:', this.value);
            });
            
            // 显示统计信息
            delegation.getStats();
        }
    }
}

// 创建事件委托演示实例
const delegationDemo = new EventDelegationDemo();

事件委托的核心优势：

  • 🎯 内存效率：减少事件监听器数量，降低内存占用
  • 🎯 动态元素支持：新添加的元素自动具有事件处理能力
  • 🎯 代码简化：统一的事件处理逻辑，易于维护
  • 🎯 性能提升：减少DOM操作和事件绑定开销

💼 最佳实践：对于大量相似元素的事件处理，优先考虑使用事件委托

📚 JavaScript事件流学习总结与下一步规划 ​

✅ 本节核心收获回顾 ​

通过本节事件流机制详解的学习，你已经掌握：

  1. 事件冒泡机制：理解事件从目标元素向上传播的完整过程
  2. 事件捕获机制：掌握事件从根元素向下传播的原理和应用
  3. 事件委托技术：学会利用事件流实现高效的事件处理
  4. 事件流控制：熟练控制事件在不同阶段的处理
  5. 性能优化应用：掌握事件委托的性能优势和实际应用

🎯 JavaScript事件流下一步 ​

  1. 常用事件类型学习：掌握鼠标、键盘、表单等各类事件的特性
  2. 自定义事件系统：构建灵活的自定义事件处理机制
  3. 事件性能优化：学习事件防抖、节流等高级优化技巧
  4. 现代事件模式：学习现代框架中的事件处理模式

🔗 相关学习资源 ​

  • MDN Event Flow：事件流的官方文档和标准
  • JavaScript Event Delegation：事件委托的深入教程
  • Event Performance Guide：事件性能优化指南
  • Modern Event Patterns：现代事件处理模式和最佳实践

💪 实践建议 ​

  1. 事件流可视化工具：开发一个事件流传播的可视化演示工具
  2. 高级事件委托库：创建一个功能完整的事件委托工具库
  3. 性能对比测试：对比不同事件处理方式的性能差异
  4. 复杂交互组件：使用事件流机制构建复杂的交互组件

🔍 常见问题FAQ ​

Q1: 什么时候使用事件捕获而不是事件冒泡？ ​

A: 事件捕获适用于需要在事件到达目标前进行预处理的场景，如全局事件拦截、权限检查、事件预处理等。大多数情况下使用冒泡即可。

Q2: 事件委托适用于所有类型的事件吗？ ​

A: 事件委托适用于支持冒泡的事件，如click、input、change等。不支持冒泡的事件（如focus、blur）不能使用事件委托，但可以使用focusin、focusout等替代。

Q3: 如何在事件委托中区分不同的子元素？ ​

A: 可以使用event.target.matches()方法匹配CSS选择器，或者检查元素的类名、标签名、data属性等来区分不同的子元素。

Q4: 事件委托会影响事件处理的性能吗？ ​

A: 事件委托通常能提升性能，特别是在处理大量相似元素时。但需要在事件处理器中进行元素匹配，对于简单场景可能略有开销。

Q5: 如何调试事件流的问题？ ​

A: 可以使用console.log输出事件阶段信息，使用Chrome DevTools的Event Listeners面板查看绑定的事件，或者使用monitorEvents()函数监控事件。

🛠️ 事件流故障排除指南 ​

常见问题解决方案 ​

事件委托不生效问题 ​

javascript
// 问题：事件委托无法处理动态添加的元素
// 解决：确保事件监听器绑定在正确的父元素上

// 错误方式：在不存在的元素上绑定
document.querySelector('.dynamic-item').addEventListener('click', handler);

// 正确方式：在父容器上使用事件委托
document.querySelector('#container').addEventListener('click', (event) => {
    if (event.target.matches('.dynamic-item')) {
        handler(event);
    }
});

事件传播控制问题 ​

javascript
// 问题：stopPropagation阻止了事件委托
// 解决：谨慎使用stopPropagation，考虑使用条件判断

// 可能有问题的代码
childElement.addEventListener('click', (event) => {
    event.stopPropagation(); // 可能阻止父元素的事件委托
    handleChildClick(event);
});

// 改进的代码
childElement.addEventListener('click', (event) => {
    handleChildClick(event);
    // 只在必要时阻止传播
    if (shouldStopPropagation(event)) {
        event.stopPropagation();
    }
});

"掌握JavaScript事件流机制是构建高效事件系统的关键，通过合理使用事件冒泡、捕获和委托技术，你将能够创建更加优雅和高性能的用户交互体验！"