在学习《JavaScript高级程序设计》一书的过程中，读到介绍事件流的一章，其中介绍了两种事件类型，即冒泡型事件与捕获型事件，当时没有读 明白，想不透理不通，没有什么概念形成，只是简单的从字面上稍微理解了些；
书中解释
冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标的顺序触发。之所以称为冒泡，因为事件按照DOM的层次结构像水泡一样不断上升至顶端；
捕获型事件：刚好和冒泡相反——事件从最不精确的对象开始触发，然后到最精确的；有些人也称之为自顶而下的事件模型，因为它是从DOM层的顶端开始 向下延伸的；
接下来研究实例吧，自己在本地测试一番，我相信肯定可以促进对事件的理解：
Code:
<!DOCTYPE HTML PUBLIC ‘-//W3C//DTD HTML 4.01//EN’ ‘http://www.w3.org/TR/html4/strict.dtd’>
<html>
<head>
<title>testing</title>
<style>.bd{border:1px orange solid}</style>
<script type=”text/javascript”>
var addEvent = function(o,c,h){
if(o.attachEvent){
o.attachEvent(‘on’+c,h);
}else{
o.addEventListener(c,h,false);
}
return true;
};
function bol(){
addEvent(document.getElementById(“di”),”click”,ai);
addEvent(document.getElementById(“dm”),”click”,am);
addEvent(document.getElementById(“do”),”click”,ao);
}
function ai(){
alert(“i”);
oe=window.event?window.event:arguments[0];
/*try{
oe.cancelBubble = true;
}catch(e){
oe.stopPropagation();
}*/
ot = oe.target?oe.target:oe.srcElement;
alert(ot.id);
}
function am(){
alert(“m”);
oe=window.event?window.event:arguments[0];
ot = oe.target?oe.target:oe.srcElement;
alert(ot.id);
}
function ao(){
alert(“o”);
oe=window.event?window.event:arguments[0];
ot = oe.target?oe.target:oe.srcElement;
alert(ot.id);
}
</script>
</head>
<body οnlοad=”bol()”>
<div id=”do”>
<div id=”dm”>
<div id=”di” style=”margin:50px”>aa</div>
</div>
</div>
</body>
</html>
——————————————————————————————————————
简单说明：
a. 对于IE事件的触发是自下而上单向的冒泡型的事件流，页面里先触发 di->dm->do->…
b. 对于Dom的事件模型是自上而下又自下而上的称为捕获型的事件流，页面里触发顺序 为…->do->dm->di->(txt)->(txt)->di->dm->do…
c. Dom 事件模型中事件可以定义在捕获阶段也可以定义在冒泡阶段，这个就是由addEventListener方法的第三个参数决定的(上面实例代码中红色标注处)，true代表在捕获阶段触发，false代表在冒泡阶段触发。大家 可以尝试把页面的addEventListener方法第三个参数改成true看下ie和firefox的不同效果。
d. 事件流存在，势必需要一种方式能够让事件流打住，阻止继续冒泡。
在IE中:oEvent.cancelBubble = true;
在Dom中:oEvent.stopPropagation();
把上面的测试页注掉的代码打开就可以看到效果
结论：
1.id=”dm”的div，在页面上并没有展现，边框没有赋予样式，但是点击他的子节点仍然会触发他的onclick事件。
2.addEvent方法是一个简易的去除增删事件处理函数差异的方法，我们可以开发一些服务方法来统一事件处理。
3. 在上面简单说明的b项中使用了”…”，代表继续向上或向下触发的元素事件，这个也是比较麻烦的地方，IE的不同版本都不同，有 div->body- >document的还有div->html->body->document的，只要记住 不要给html元素添加事件处理函数就好了。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
