javascript点击事件中的捕获/冒泡运用

<pre name="code" class="html"><style>
*{margin:0px;padding:0px;box-sizing:border-box;transition: background 800ms;padding:20px;}
body,html{height: 100%;}
body{  background:#40b7d8;}
html{  background:#6bc7e1;}
div{height:100%;  background: #95d7ea;}
p{height:100%;  background: #c0e7f2;}
span{height:100%;  background: #eaf7fb;display: block;}
.highlight {background: red;}
</style>

<div>
<p>
<span style="white-space:pre">	</span><span>Click on a layer to watch the event move through the DOM tree</span>
</p>
</div>

<script type="text/javascript">
var panit=200;
var a;
window.οnlοad=function(){
var body=document.body;
var html=document.documentElement;
var div=body.querySelector('div');
var p=body.querySelector('p');
var span=body.querySelector('span');

addListener(div,'click',callback);
addListener(p,'click',callback);
addListener(span,'click',callback);

}
var addListener=(function(){
if(document.attachEvent){
return function(element,event,handler){
element.attachEvent('on'+event,function(event){
var event=window.event;
event.target=event.srcElement;
event.currentTarget=element;
handler.call(element,event)
})
}
}else{
return function(element,event,handler){
element.addEventListener(event,handler,false)
}
}
}())
function callback(event){
var ms=a= (a+panit)||0;
var current=event.currentTarget;
setTimeout(function(){
current.className='highlight';
setTimeout(function(){
current.className='';
},panit)
},ms)
}
</script>