关于html:html的事件的捕获和冒泡

element.addEventListener(event, function, useCapture)
addEventListener有三个参数，大多数人个别只用到了两个参数

1. 第一个参数 event指定事件名。
2. 第二个参数 function指定要事件触发时执行的函数。
3. 第三个参数useCapture，true——事件句柄在捕捉阶段执行；false——默认值。事件句柄在冒泡阶段执行

事件捕捉过程和冒泡过程如上图所示，传递形式别离是由上而下和由下而上。依据图示，能够写个 demo 来验证这个问题,addEventListener第三个参数设置为 true

level- 1 为 div 标签，level- 2 为 p 标签，level- 3 为 span 标签
绑定事件，测试代码如下

const levelOne = document.getElementById("levelOne");
const levelTwo = document.getElementById("levelTwo");
const levelThree = document.getElementById("levelThree");

window.addEventListener(
  "click",
  function (e) {console.log("window 捕捉", e.target.nodeName, e.currentTarget.nodeName);
  },
  true
);

levelOne.addEventListener(
  "click",
  function (e) {console.log("levelOne 捕捉", e.target.nodeName, e.currentTarget.nodeName);
  },
  true
);

levelTwo.addEventListener(
  "click",
  function (e) {console.log("levelTwo 捕捉", e.target.nodeName, e.currentTarget.nodeName);
  },
  true
);

levelThree.addEventListener(
  "click",
  function (e) {console.log("levelThree 捕捉", e.target.nodeName, e.currentTarget.nodeName);
  },
  true
);

其中 e.target.nodeName 指以后点击的元素，e.currentTarget.nodeName为绑定监听事件的元素

console.log("levelThree 捕捉", e.target.nodeName, e.currentTarget.nodeName);

当点击最里层 SPAN 标签时，打印如下

最先捕捉的是 window, 输入 e.target.nodeName 为 SPAN,window 没有标签属性，e.currentTarget.nodeName为 undefined
上面 levelOne 到 levelThree 顺次捕捉，e.target.nodeName输入都为点击的 SPAN 标签，为大小，e.currentTarget.nodeName为绑定监听事件的元素
由此可见，捕捉阶段从上往下传递

冒泡事件
代码批改一下，第三个参数改为 false。
当点击最内层 SPAN 标签时，打印程序如下

当点击 levelTwo 时，这时最内层的 SPAN 标签没有捕捉到冒泡事件。

stopPropagation
stopPropagation() 办法避免调用雷同事件的流传。
当有需要，心愿事件进行流传或有额定操作时，能够在事件捕捉阶段进行拦挡，比方点击最内层 span 标签时，如果我在 levelOne 就对事件进行了拦挡，事件将不会持续乡下传递

levelOne.addEventListener(
  "click",
  function (e) {e.stopPropagation()
    console.log("levelOne 捕捉", e.target.nodeName, e.currentTarget.nodeName);
  },
  true
);

打印如下

preventDefault
preventDefault() 阻止默认行为
内层 span 标签有个 a 标签，链接用于跳转百度首页。增加阻止默认行为代码后

aHref.addEventListener("click", function (e) {e.preventDefault();
});

点击 a 标签，控制台只打印了捕捉和冒泡事件的打印