前端基础入门三大核心之JS篇：DOM事件传播与监听的艺术——addEventListener()的深度解析【含代码示例】

在JavaScript的王国里，DOM（Document Object Model）与事件系统是构建动态交互体验的基石。本文将带你深入探究DOM事件传播机制的奥秘，以及如何利用 addEventListener()这一现代事件监听方法编织出优雅的交互网。准备好，让我们一起揭开这层层面纱，领略前端魔法的真谛。

DOM事件传播：一场层次间的旅行

基本概念

DOM事件传播遵循两种模式：捕获阶段和冒泡阶段。事件先从根节点向下到达目标元素（捕获），执行处理后再从目标向上返回根节点（冒泡）。

案例一：直观感受传播

document.getElementById('outer').addEventListener('click', function(e) {
   
    console.log('外层捕获/冒泡：', e.eventPhase);
}, true); // true表示捕获阶段
}, false); // false或省略表示冒泡阶段

document.getElementById('inner').addEventListener('click', function(e) {
   
    console.log('内层捕获/冒泡：', e.eventPhase);
}