重温js，对于js的事件处理机制再一次做一个总结，今天特地上网找了好多博客学习了一下，在此做个笔记，也供大家学习。大致内容与以前写过的一篇一致，部分细节不同。
一、 事件流：
标准的事件流分为三个阶段：
事件捕获阶段，处理目标阶段，事件冒泡阶段
IE的事件流分为两个阶段：
处理目标阶段，事件冒泡阶段
我们从一张图片开始说起（在网上找到的）
事件流
这里假设给div绑定了一个onclick事件，当我们点击div时，实际上是先点击document，然后逐层向下捕获事件，捕获到div有一个点击事件，开始进行事件源处理，处理完成后，继续向下，直到没有子节点，此时，开始执行事件冒泡阶段，从最后一层子节点，逐层向上冒泡，最后传递给document。
举个例子说明：
<div id="box1">
<div id="box2"></div>
</div>
<style type="text/css">
#box1 {
width: 300px;
height: 300px;
background-color: red;
}
#box2 {
width: 200px;
height: 200px;
background-color: green;
}
</style>
function $(id) {
return document.getElementById(id);
}
// 点击box2会继续弹出box1及body，这是冒泡造成的，所以要阻止冒泡
$("box2").onclick = function (e) {
var e = e || window.event;
// if (e.stopPropagation) {
// e.stopPropagation();
// } else {
// e.cancelable();
// }
alert("box2");
}
$("box1").onclick = function (e) {
var e = e || window.event;
// if (e.stopPropagation) {
// 非IE
// e.stopPropagation();
// } else {
// IE
// e.cancelBubble();
// }
alert("box1");
}
document.body.onclick = function () {
alert("body");
}
此时，我注释掉了阻止冒泡事件的代码，当点击box2时，会弹出box2，box1，body，这就是冒泡机制造成的，显然，我们并不希望此种情况的发生，所以，需要进行，阻止冒泡。
代码中，注释掉的部分就是阻止事件冒泡的方法。
当然，冒泡机制，是指同一事件，例子中是onclick，如果把box2的事件改为onmouseover，则不会产生冒泡行为，但，box1与body的事件仍为onclick，所以点击box1，仍会继续弹出body。
如有不对的地方，希望大家积极指正
