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

运用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>