HTML 事件机制
页面上点击一个按钮，浏览器做了什么？
今天我们就浅浅的了解下，浏览器到底干了什么。
当页面触发一个事件的时候，浏览器主要做了三个阶段的事情：
- capture phase：捕获事件阶段
- target phase： 目标处理阶段
- bubble phase： 后续事件处理阶段
capture阶段就是当事件被触发的时候，产生事件对象，传递事件对象，最终找到目标元素触发事件。
那么事件是如何传递的呢？
- 浏览器会产生一个Event对象，包含目标元素的标识，事件名称等信息
- 然后，浏览器从DOM结构的根节点开始向各个也节点分发Event对象
从根节点到目标节点的父节点，这个过程就叫做capture阶段。
target阶段指Event对象到达了目标节点。
当Event对象到达了目标节点，目标节点将会马上执行注册好的监听器。
event.preventDefault();以上代码阻止了元素的默认行为，比如a标签的默认行为是打开href定义的页面。
bubble阶段是指当target阶段结束后，从目标节点反向的传递到跟节点的过程。
我们可以通过
event.stopPropagation();来阻止向上传递的过程。
具体序列图如下：
那么HTML是如何约束这个机制的呢，我们来看下整体的接口：
以上是HTML接口图：
Event接口规定了产生的事件的详细信息，包含事件目标对象，事件是否可以取消，事件所处的阶段等等信息。
CustomEvent则是Event的扩展，提供了第三方的扩展性。
DocumentEvent则是负责Event对象的产生。
EventListener规定了事件监听器的主要行为。
EventTarget负责Event对象的分发和事件监听器的注册以及响应。
我们来看一个实例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<div id="d" onclick="alert('this is bubble phase');">
this is div
<a id="a" href="#" onclick="alert('target');">test</a>
</div>
</BODY>
<script type="text/javascript">
document.getElementById("d").addEventListener('click',function(){
alert("this is capture phase");
},true);
</script>
</HTML>点击test连接的时候，alert的顺序
- this is capture phase
- target
- this is bubble phase
addEventListener 的第三个参数是useCapture，true表示是否将此事件监听器注册到capture阶段。