DOM事件流

DOM2级事件包含3个阶段：事件捕获阶段、目标阶段和事件冒泡阶段:

• 捕获阶段 - The capture phase - 事件从最顶层元素 window 一直传递到目标元素的父元素.
• 目标阶段 - The target phase - 事件到达目标元素. 如果事件指定不冒泡. 那就会在这里中止.
• 冒泡阶段 - The bubble phase - 事件从目标元素父元素向上逐级传递直到最顶层元素 window. 及捕获阶段的反方向.

既然是事件那就离不开这个函数了：addEventListener，我们简单看下它的用法：

target.addEventListener(type, listener[, options]);
target.addEventListener(type, listener[, useCapture]);

• type: 表示监听事件类型的字符串. 事件列表.
• listener: 当所监听的事件类型触发时的回调. 会接收到一个事件通知对象.
• options: 可选. 可用的选项如下:
  • capture: Boolean, 如果是 true, 表示 listener 会在捕获阶段触发. 默认是 false. 冒泡捕获. 所以微软牛逼.
  • once: Boolean, 如果是 true, 表示 listener 在添加之后最多只调用一次.
  • passive: Boolean，如果是, 表示 listener 永远不会调用 preventDefault(). 如果 listener 仍然调用了这个函数, 客户端将会忽略它并抛出一个控制台警告.

此外，通过DOM0的方法：element.onclick = function来添加事件监听只能在冒泡阶段生效。由此就能控制