关于事件捕获和冒泡，以下代码输出多少

<div class="container" id="container">
  <div class="item" id="item">
    <div class="btn" id="btn">Click me</div>
  </div>
</div>

document.addEventListener(
  "click",
  (e) => {
    console.log("Document click");
  },
  {
    capture: true,
  },
);
 
container.addEventListener(
  "click",
  (e) => {
    console.log("Container click");
    // e.stopPropagation()
  },
  {
    capture: true,
  },
);
 
item.addEventListener("click", () => {
  console.log("Item click");
});
 
btn.addEventListener("click", () => {
  console.log("Btn click");
});
 
btn.addEventListener(
  "click",
  () => {
    console.log("Btn click When Capture");
  },
  {
    capture: true,
  },
);

Document click
Container click
Btn click When Capture
Btn click
Item click

<div id="s1">
  s1
  <div id="s2">s2</div>
</div>

#s1 {
  width: 200px;
  height: 200px;
  background-color: burlywood;
  overflow: hidden;
}
#s2 {
  width: 100px;
  height: 100px;
  background-color: aquamarine;
  margin: 50px;
}

let s1 = document.getElementById("s1");
let s2 = document.getElementById("s2");
 
s2.onclick = function () {
  console.log("s2 click1");
};
s1.addEventListener(
  "click",
  function (e) {
    console.log("s1 冒泡事件");
  },
  false,
);
s2.addEventListener(
  "click",
  function (e) {
    console.log("s2 冒泡事件2");
  },
  false,
);
s2.addEventListener(
  "click",
  function (e) {
    console.log("s2 冒泡事件1");
  },
  false,
);
s1.addEventListener(
  "click",
  function (e) {
    console.log("s1 捕获事件");
  },
  true,
);
s2.addEventListener(
  "click",
  function (e) {
    console.log("s2 捕获事件");
  },
  true,
);
s2.onclick = function () {
  console.log("s2 click2");
};

s1 捕获事件
s2 捕获事件
s2 click2
s2 冒泡事件2
s2 冒泡事件1
s1 冒泡事件