js做一个三层嵌套的盒子，感知事件流

好的，以下是一个三层嵌套盒子的示例代码，它演示了事件流的感知。

HTML 代码：

<div id="outer">
  <div id="middle">
    <div id="inner"></div>
  </div>
</div>

CSS 代码：

#outer {
  width: 300px;
  height: 300px;
  background-color: #eee;
  padding: 20px;
}

#middle {
  width: 80%;
  height: 80%;
  background-color: #ccc;
  padding: 20px;
}

#inner {
  width: 80%;
  height: 80%;
  background-color: #aaa;
  padding: 20px;
}

JavaScript 代码：

// 获取 DOM 对象
var outer = document.getElementById('outer');
var middle = document.getElementById('middle');
var inner = document.getElementById('inner');

// 绑定事件处理函数
outer.addEventListener('click', function(event) {
  console.log('outer clicked');
}, false);

middle.addEventListener('click', function(event) {
  console.log('middle clicked');
}, false);

inner.addEventListener('click', function(event) {
  console.log('inner clicked');
}, false);

在上面的代码中，我们首先获取了三个 DOM 对象 `outer`、`middle` 和 `inner`，然后分别为它们绑定了一个点击事件的处理函数。当用户点击每个盒子时，控制台将输出相应的事件消息。

在事件处理函数中，我们将第三个参数 `useCapture` 设置为 `false`，这表示我们使用事件冒泡模式。这意味着当用户点击 `inner` 盒子时，事件将从 `inner` 盒子开始向外传播，依次经过 `middle` 和 `outer` 盒子，最终到达 `document` 对象。在传播过程中，每个盒子都将触发自己的点击事件处理函数。

如果我们将 `useCapture` 设置为 `true`，这表示我们使用事件捕获模式。这意味着当用户点击 `inner` 盒子时，事件将从 `outer` 盒子开始向内传播，依次经过 `middle` 和 `inner` 盒子，最终到达目标元素 `inner` 盒子。在传播过程中，每个盒子都将触发自己的点击事件处理函数。

事件流的默认模式是事件冒泡模式。在大多数情况下，我们都应该使用事件冒泡模式。但在某些特定场景下，我们可能需要使用事件捕获模式。