JavaScript中事件模型的详细说明（代码示例）
事件
用户与网页交互是通过事件实现的，事件刚开始是作为分担服务器负载的一个手段，起初没有统一的规范，直到 DOM2 级，网景和 IE 才开始有各自的 API 规范。
对于事件的触发机制，两个公司都认为页面的触发机制并不只是点击了某个元素，就只触发当前目标元素的事件。
比方说：页面有多个同心圆，当点击最里面的圆时，你其实也点击了包含这个圆外面的那些圆。 两个公司对这点的认同是一致的，但是事件流的传播顺序上采用了不同的两种方案来实现，即事件冒泡和事件捕获。
一、事件冒泡
IE 浏览器从老版本开始就一直支持事件冒泡机制，所谓事件冒泡，指事件流开始是从较为具体的元素接收，一直传播上不具体的元素上。
就是从目标元素传播到父级元素。
<body>
<div id="parent">
<div id="child"></div>
</div>
<script>
function childEventHandler(event) {
console.log(this);
console.log("child 被点击了");
}
function parentEventHandler(event) {
console.log(this);
console.log("parent 被点击了");
}
function bodyEventHandler(event) {
console.log(this);
console.log("body 被点击了");
}
function htmlEventHandler(event) {
console.log(this);
console.log("html 被点击了");
}
function documentEventHandler(event) {
console.log(this);
console.log("document 被点击了");
}
function windowEventHandler(event) {
console.log(this);
console.log("window 被点击了");
}
var bodyEl = document.getElementsByTagName("body")[0];
var htmlEl = document.getElementsByTagName("html")[0];
var win = window;
var parentEl = document.getElementById("parent");
var childEl = document.getElementById("child");
childEl.onclick = childEventHandler;
parentEl.onclick = parentEventHandler;
bodyEl.onclick = bodyEventHandler;
htmlEl.onclick = htmlEventHandler;
document.onclick = documentEventHandler;
win.onclick = windowEventHandler;
</script>
</body>如下图所示，如果点击了 id 为 child 的元素后，事件流会从 child 一直传播到 window 对象。
所有现代浏览器都支持事件冒泡。
二、事件捕获
由网景公司主导的事件捕获则刚好和事件冒泡相反，事件流开始从不具体的元素触发，然后传播到具体的元素上。简而言之就是从父级元素传播到目标元素。
由于事件捕获是从 IE 9开始支持，不兼容老版本浏览器，所以使用的人比较少。
三、事件流
DOM 规定事件包括三个阶段，事件捕获，处于目标阶段、事件冒泡。
从 IE 9 开始的浏览器规定，事件流的顺序先是事件捕获，会截获到事件，然后是处于目标阶段，实际的目标接收到事件，最后是事件冒泡，可以在这个阶段对事件进行响应。
以之前的 child 元素为例，直到 child 元素接收到事件前（从 window 到 parent），都是事件捕获阶段。到了 child 元素，此时对事件进行处理，随后冒泡到 window 对象上，冒泡阶段也是可以对事件进行处理的。 基于事件冒泡能对事件进行处理的特点，随后将讲到与其有关的事件委托机制。
四、事件绑定
HTML 与 事件的绑定有三种形式：
1.
<div id="child" onclick="console.log('hello');"></div>
2.
var childEl = document.getElementById("child");
childEl.onclick = function() {
console.log('hello');
}
3.
var childEl = document.getElementById("child");
childEl.addEventListener('click', function() {
console.log('hello');
}, false);