为何点击无点击处理器的内层元素会触发外层form的捕获阶段点击事件？

原因如下：

• 浏览器的事件传播分为捕获阶段和冒泡阶段。当你点击<p>或<div>时，事件会从最顶层的window对象开始，沿着DOM树向下传播（捕获阶段），最终到达被点击的目标元素。
• 你给<form>绑定click事件时，第三个参数设为true，这意味着该事件监听函数会在捕获阶段触发。当点击事件的捕获路径经过<form>时，自然会触发这个监听函数，输出capturing form。
• 你给<div>和<p>绑定的是focus事件，而非click事件，点击操作不会触发focus类型的事件，所以这两个元素的监听函数不会执行。

如果想让<form>仅在自身被点击时才触发事件，可以在处理函数中判断事件目标是否为<form>本身：

form.addEventListener("click", e => {
  if(e.target === form){
    console.log("capturing form")
  }
}, true);

内容的提问来源于stack exchange，提问作者user19481364