在学习《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元素添加事件处理函数就好了。