Javascript事件的捕获与冒泡

首先根据定义，addEventListener() 方法用于向指定元素添加事件句柄。其中有3个参数，addEventListener(event,function,useCapture),分别为：

event：字符串，指定事件名。（必须）

function：指定要事件触发时执行的函数。（必须）

useCapture:布尔值，指定事件是否在捕获或冒泡阶段执行。(可选）
useCapture的可能值为：
true - 事件句柄在捕获阶段执行
false- 默认。事件句柄在冒泡阶段执行。

也许我们平时会碰到这样一种情况，一个div1在div2元素中，而我们不仅给div1设置了点击事件，还给div2设置了点击事件。

  <div id="div2">
    <div id="div1">div1</div>
    div2
  </div>

script：
  const div1 = document.getElementById('div1');
  const div2 = document.getElementById('div2');
  div1.addEventListener('click', () => alert('i am div1!'));
  div2.addEventListener('click', () => alert('i am div2!'));

此时当我们点击div1时，不仅执行了div1里的函数，还执行了div2中的函数。会先弹出’i am div1‘ ，然后再弹出’i am div2‘。
其实这里就是因为事件冒泡了，冒泡的顺序由内层向外层传播。如果需要阻止事件冒泡，则在div1的监听事件的执行函数中加入event.stopPropagation()即可。

  const div1 = document.getElementById('div1');
  const div2 = document.getElementById('div2')