JavaScript和HTML的交互是通过事件实现的，JavaScript采用异步事件驱动，当文档，浏览器，元素或与之相关的对象发生特定事情时，浏览器会产生事件。如果JavaScript关注特定的事件，那么它就可以注册当这类事件发生时要调用的句柄
1. 事件是某个行为或者触发，比如点击，鼠标移动
2. 当用户点击鼠标时
3. 当网页已加载时
4. 当图像已加载时
5. 当鼠标移动到元素上时
6. 当用户触发按键时
事件流：
事件流描述的是从页面中接收事件的顺序，比如有两个嵌套的div，点击了内层的div，这时候是内层的div先触发click事件还是外层先触发？目前主要有三种模型：
事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素
事件捕获：不太具体的节点更早接收事件，而最具体的元素最后接收事件，和事件冒泡相反
DOM事件流：DOM2级事件规定事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段，首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段
这种分歧在日常生活中也很常见，举个例子，某个地方出了抢劫事件，我们有多种处理方式：
村里先发现，报告给乡里，乡里报告到县城，县城报告给市里。。。。
市里先知道这事儿，然后交代给县城怎么处理，县城交给到乡里处理，乡里交给村里处理
Opera、Firefox、Chrome、Safari都支持DOM事件流，IE不支持事件流，只支持事件冒泡
如有以下html
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Test Page</title>
</head>
<body>
<div>
Click Here
</div>
</body>
</html>
点击div区域
-
事件冒泡
image.png
事件开始时由最具体的元素接受，然后逐级向上传播到较为不具体的元素
-
事件捕获
image.png
不太具体的节点更早接受事件，而最具体的元素最后接受事件，和事件冒泡相反
-
DOM事件流
image.png
DOM2级事件规定事件流包括三个阶段，事件捕获阶段，处于目标阶段，时间冒泡阶段，首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接受事件，最后是冒泡阶段
注：Opera、Firefox、Sarfari都支持DOM事件流，IE不支持事件流，只支持时间冒泡。
事件传播机制
当一个事件发生以后，它会在不同的DOM节点之间传播（propagation），这种传播分为三个阶段
第一阶段：从window对象传导到目标节点，称为“捕获阶段”(capture phase)。
第二阶段：在目标节点上触发，称为“目标阶段”(target phase)。
第三阶段：从目标节点传导回window对象，称为“冒泡阶段”(bubbling phase)。
这种三阶段的传播模型，会使得一个事件在多个节点上触发。
