DOM事件模型: 就是通过监听函数（listener）对事件做出反应。事件发生后，浏览器监听到了这个事件，就会执行对应的监听函数。
DOM 事件流: 当一个HTML元素触发一个事件时，该事件会在子元素和父元素之间传播。传播按顺序分为二个阶段：捕获阶段、、冒泡阶段，这个传播过程就是 DOM 事件流。
从外向内找监听函数，叫事件捕获（由网景提出）；从内向外找监听函数，叫事件冒泡（由IE提出），2002 年，W3C 发布标准，规定浏览器应该同时支持两种调用顺序，文档名为 DOM Level 2 Events Specification。
1.首先按爷爷=>爸爸=>儿子顺序看有没有函数监听**（事件捕获）**
2.然后按儿子=>爸爸=>爷爷顺序看有没有函数监听**（事件冒泡）**
3.有监听函数就调用，并提供事件信息，没有就跳过
但并不是每次函数都要调用两次，而是开发者自己选择把函数放在捕获阶段还是放在冒泡阶段。有些事件是没有冒泡的，比如 onblur、onfocus、onmouseenter、onmouseleave。
示意图：
示意代码：
绑定事件的监听函数EventTarget.addEventListener()用于在当前节点或对象上，定义一个特定事件的监听函数。一旦这个事件发生，就会执行监听函数。该方法没有返回值。
target.addEventListener(type, listener[, useCapture]);该方法接受三个参数。
type：事件名称，大小写敏感。
listener：事件处理函数，事件发生时，会调用该监听函数
useCapture：可选参数，是一个布尔值，默认是 false。如果 bool 不传或为 falsy，就让 fn 走冒泡阶段，即当浏览器在冒泡阶段发现 父级节点 有 fn 监听函数，就会调用 fn，并提供事件信息；如果 bool 为 true，就让 fn 走捕获阶段，即当浏览器在捕获阶段发现 baba 有 fn 监听函数，就会调用 fn ，并提供事件信息。
移除事件的监听函数：eventTarget.removeEventListener(type, listener[, useCapture]);方法用来移除addEventListener()方法添加的事件监听函数。该方法没有返回值。removeEventListener()方法的参数，与addEventListener()方法完全一致。它的第一个参数“事件类型”，大小写敏感。
注意：removeEventListener()方法移除的监听函数，必须是addEventListener()方法添加的那个监听函数，而且必须在同一个元素节点，否则无效。事件结束了，事件的对象就不存在了。
触发事件： EventTarget.dispatchEvent()方法在当前节点上触发指定事件，从而触发监听函数的执行。该方法返回一个布尔值，只要有一个监听函数调用了Event.preventDefault()，则返回值为false，否则为true。
