目标处的冒泡和捕获事件顺序

Question

在目标阶段是否在任何位置定义了冒泡事件和捕获事件的顺序？

几乎您在任何地方都可以看到，首先是捕获阶段，然后是冒泡阶段。 Some来源另外提到目标阶段是一个单独的阶段。

但是，在此阶段中，源提到目标阶段未指定事件顺序。我假设注册为捕获的事件将在注册为冒泡的事件之前。 事实并非总是如此！

实际上-根据我的小实验结果-目标阶段中事件处理程序的执行完全取决于它们的注册顺序。

const extBox = document.querySelector('.external-box');
const intBox = document.querySelector('.internal-box');
const par = document.querySelector('p');

extBox.addEventListener('click', bubblingEvent, false);
intBox.addEventListener('click', bubblingEvent, false);
par.addEventListener('click', bubblingEvent, false);

par.addEventListener('click', capturingEvent, true);
extBox.addEventListener('click', capturingEvent, true);
intBox.addEventListener('click', capturingEvent, true);      
      
function bubblingEvent(event) {
  console.log(event.currentTarget.className + ': bubbling event, ' + getPhaseStr(event.eventPhase));
}
      
function capturingEvent(event) {
  console.log(event.currentTarget.className + ': capturing event, ' + getPhaseStr(event.eventPhase));
}

function getPhaseStr (eventPhase) {
  let eventPhaseStr;

  switch (eventPhase) {
    case 0:
      eventPhaseStr = 'NONE';
      break;
    case 1:
      eventPhaseStr = 'CAPTURING_PHASE';
      break;
    case 2:
      eventPhaseStr = 'AT_TARGET';
      break;
    case 3:
      eventPhaseStr = 'BUBBLING_PHASE';
      break;
    default:
      eventPhaseStr = 'ERROR';
  }

  return eventPhaseStr;
}

* {
  box-sizing: border-box;
}

.external-box, .internal-box {
  width: 50%;
  margin: 1rem;
  padding: 1rem;
}

.external-box {
  background-color: aquamarine;
}

.internal-box {
  background-color: blueviolet;
}

p {
  background-color: cornsilk;
  padding: 1rem;
}

<div class='external-box'>external-box
  <div class='internal-box'>internal-box
    <p class='par'>paragraph</p>
  </div>
</div>

在上面的示例中，我们可以看到-在目标阶段期间-为捕获阶段添加的事件是在捕获阶段之前执行的。这是因为我先注册了冒泡阶段的事件。如果我先为捕获阶段注册事件，然后为冒泡事件注册，那么顺序将是“正确的”。我的问题再次：在目标阶段的事件顺序是否在任何地方定义？

是否在目标阶段定义了冒泡事件和捕获事件的顺序？在几乎任何地方都可以看到，首先是捕获阶段，然后是冒泡阶段。一些来源...

Answer 1

您是正确的。当事件侦听器附加到元素上并且该元素是目标时，是否将事件侦听器设置为在捕获期间还是冒泡期间激活都无关紧要。官方规范对此进行了描述here。