事件冒泡和事件捕获小知识，大挑战！本文正在参与“程序员必备小知识”创作活动事件冒泡 IE 事件流被称为事件冒泡，当我们

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动

事件冒泡

IE 事件流被称为事件冒泡，当我们点击的元素后，最先触发 click 事件，然后会沿DOM树一路向上，在经过的每个节点上依次触发，直至到达 document 对象。

事件捕获

事件捕获实际上是为了在事件到达最终目标前拦截事件。在事件捕获中，click 事件首先由 document 元素捕获，然后沿 DOM 树依次向下传播，直至到达实际的目标元素。

事件流分为 3 个阶段：事件捕获、到达目标和事件冒泡

事件捕获最先发生，最后一个阶段是冒泡。

DOM 事件流中，实际的目标（<div>元素）在捕获阶段不会接收到事件。这是因为捕获阶段从document 到<html>再到<body>就结束了。

DOM0 事件处理程序

JavaScript 中指定事件处理程序的传统方式是把一个函数赋值给（DOM 元素的）一个事件处理程序属性。

每个元素都有通常小写的事件处理程序属性，比如 onclick。只要把这个属性赋值为一个函数即可：

let btnClick = document.getElementById("buttonClick");
btnClick.onclick = function() {
    console.log(this.id); // "buttonClick"
};

当我们点击按钮时，就会显示元素的id。这个id我们可以通过this.id获取的。不仅仅是id，在事件处理程序里通过 this 可以访问元素的任何属性和方法。

btnClick.onclick = null; // 移除事件处理程序

把事件处理程序设置为 null，再点击按钮就不会执行任何操作了。

DOM2 事件处理程序

DOM2s 为事件处理程序的赋值和移除定义两个方法：addEventListener()和removeEventListener()，它们接收 3 个参数：事件名、事件处理函数和一个布尔值，true 表示在捕获阶段调用事件处理程序，false（默认值）表示在冒泡阶段调用事件处理程序。

demo.js

let btnClick= document.getElementById("btnClick");
btnClick.addEventListener("click", () => {
    console.log(this.id);
}, false);
btnClick.addEventListener("click", () => {
    console.log("DOM2事件处理程序!");
}, false);