在一个 DOM 上同时绑定两个点击事件：一个用捕获，一个用冒泡。事件会执行几次？先执行冒泡还是捕获？

<div id="parent">parent
  <div id="child" style="margin: 100px;">
    child
  </div>
</div>
<script>
  const parent = document.getElementById('parent')
  const child = document.getElementById('child')
  parent.addEventListener('click', () => {console.log('parent-not-useCapture')})
  parent.addEventListener('click', () => {console.log('parent-useCapture')}, true)
  child.addEventListener('click', () => {console.log('child-not-useCapture')})
  child.addEventListener('click', () => {console.log('child-useCapture')}, true)
  </script>

:::info 点击内部按钮

“parent-useCapture”
“child-useCapture”
“child-not-useCapture”
“parent-not-useCapture”
答： 目标元素，事件执行两次，先捕获再冒泡。

:::