DOM 元素事件执行

有如下的 HTML 文档结构：

 <div id="parent">
  <div id="child" class="child">
    点我
  </div>
</div>
// 1
        document.getElementById("parent").addEventListener("click", function (e) {
            alert(`parent 事件触发，` + this.id);
        });

        document.getElementById("child").addEventListener("click", function (e) {
            alert(`child 事件触发，` + this.id);
        });
// 2
        document.getElementById("parent").addEventListener("click", function (e) {
            alert(`parent 事件触发，` + e.target.id);
        });

        document.getElementById("child").addEventListener("click", function (e) {
            alert(`child 事件触发，` + e.target.id);
        });
// 3
        document.getElementById("parent").addEventListener("click", function (e) {
            alert(`parent 事件触发，` + e.target.id);
        }, true);

        document.getElementById("child").addEventListener("click", function (e) {
            alert(`child 事件触发，` + e.target.id);
        }, true);

点击 id 为 child 的 div 后，这三份 JavaScript 代码的执行结果分别是什么？
答:

• 第一次结果为：先弹出“child 事件触发，child”，再弹出“parent 事件触发，parent”。
• 第二次结果为：先弹出“child 事件触发，child”，再弹出“parent 事件触发，child”。
• 第三次结果为：先弹出“parent 事件触发，child”，再弹出“child 事件触发，child”。
  题解:
  HTML 页面上 DOM 元素的事件执行顺序一般有三个阶段：
• 事件捕获
• 事件触发
• 事件冒泡
  dom标准事件流的触发的先后顺序为：先捕获再冒泡，即当触发dom事件时，会先进行事件捕获，捕获到事件源之后通过事件传播进行事件冒泡。
  而在浏览器中默认执行的是事件冒泡，即我们一般观察不到事件捕获阶段，比如 onclick 等事件。
  如果想要观察到事件的捕获阶段，那我们就需要借助 addEventListener 接口来实现。
  addEventListener() 方法用于向指定元素添加事件句柄。
  语法: element.addEventListener(event, function, useCapture)
• event 必须。字符串，指定事件名。
  注意: 不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。
• function必须。指定要事件触发时执行的函数。
• useCapture 可选。布尔值，指定事件是否在捕获或冒泡阶段执行。
  可能值:
  true - 事件句柄在捕获阶段执行
  false- false- 默认。事件句柄在冒泡阶段执行