理解捕捉阶段、目标阶段、冒泡阶段

三个阶段的理解

如果按照捕捉->目标->冒泡的顺序理解，也许有些难以解释。但是如果分成两个阶段理解会容易一些，这两个阶段分别是捕捉->目标与目标->冒泡。

现在的浏览器是将两个阶段合在一起，但通常捕捉->目标的过程是不常使用的，因为监听器第三个参数默认状态为false。所以仅有目标->冒泡的阶段。而如果监听器第三个参数设置为true，则仅有捕捉->目标的状态。

目标->冒泡阶段

document.querySelector('.operations__tab--1').addEventListener(
  'click',
  function (e) {
    console.log('子元素事件触发');
  },
 
);
tabsContainer.addEventListener(
  'click',
  function (e) {
    console.log('父元素事件触发');
  },

);

点击01按钮后，目标阶段的按钮事件触发，后冒泡到根节点的过程中，父元素被事件监听器监听到，随后事件发生，这是事件监听器的默认状态。

document
  .querySelector('.operations__tab--1')
  .addEventListener('click', function (e) {
    console.log('子元素事件触发');
    e.stopPropagation();
  });
tabsContainer.addEventListener('click', function (e) {
  console.log('父元素事件触发');
});

点击01按钮后，并取消事件传播后，即目标阶段发生后，事件不再冒泡，父元素就不会被事件监听器捕捉到，仅有子元素事件触发。

捕捉->目标阶段

document.querySelector('.operations__tab--1').addEventListener(
  'click',
  function (e) {
    console.log('子元素事件触发');
  },
  true
);
tabsContainer.addEventListener(
  'click',
  function (e) {
    console.log('父元素事件触发');
  },
  true
);

点击01按钮后，并设置捕获阶段发生事件，父元素先进行事件触发，子元素随后触发。

document.querySelector('.operations__tab--1').addEventListener(
  'click',
  function (e) {
    console.log('子元素事件触发');
  },
  true
);
tabsContainer.addEventListener(
  'click',
  function (e) {
    console.log('父元素事件触发');
    e.stopPropagation();
  },
  true
);

点击01按钮后，并设置捕获阶段发生事件，并取消事件传播后，父元素先进行事件触发，子元素不发生事件。

与事件委托相结合的例子：

一些问题：

mouseover与mouseenter事件的区别在于前者支持冒泡，当监听父节点事件时，子节点一旦监听到事件，就会在冒泡的过程中触发事件。而后者切断冒泡的过程，即必须是父节点才能触发事件。

如果mouseover添加阻止事件传播后，就变为了mouseente。但是，通过实验发现，mouseover不能阻止冒泡发生，成为了疑问点。