在DOM上同时绑定两个点击事件（一个用捕获，一个用冒泡），事件总共会执行几次，先执行哪个事件？

在DOM上同时绑定两个点击事件，一个使用捕获，一个使用冒泡，事件总共会执行两次。

执行顺序：

1. 捕获阶段的事件先执行。 当事件发生在目标元素的祖先元素上时，捕获阶段的监听器会先被触发，一路向下传递到目标元素。

2. 冒泡阶段的事件后执行。 事件在目标元素上触发后，会沿着DOM树向上冒泡，依次触发祖先元素上绑定的冒泡阶段监听器。

示例：

假设HTML结构如下:

<div id="outer">
  <button id="inner">Click Me</button>
</div>

JavaScript代码如下：

const outer = document.getElementById('outer');
const inner = document.getElementById('inner');

// 捕获阶段监听器
outer.addEventListener('click', function(event) {
  console.log('outer capture');
}, true); // true表示捕获阶段

// 冒泡阶段监听器
inner.addEventListener('click', function(event) {
  console.log('inner bubble');
}, false); // false或省略表示冒泡阶段


// 冒泡阶段监听器
outer.addEventListener('click', function(event) {
  console.log('outer bubble');
}); // 省略第三个参数，默认为冒泡阶段

当你点击按钮时，控制台会输出：

outer capture
inner bubble
outer bubble

总结：

即使事件处理函数绑定在同一个元素上，捕获阶段的事件总是先于冒泡阶段的事件执行。如果事件处理函数绑定在不同的祖先元素上，则按照DOM树的层级关系，从外到内执行捕获，从内到外执行冒泡。