html alert 确认加事件,js事件中有alert执行顺序的问题

我运行是弹一个框改变一个颜色，并没有出现所有alert再变色的情况

代码如下

#div1{

width:300px;

height:300px;

border:1px solid black;

}

#div2{

margin:50px auto;

width:200px;

height:200px;

border:1px solid black;

}

#div3{

margin:50px auto;

width:100px;

height:100px;

border:1px solid black;

}

var div1=document.getElementById('div1');

var div2=document.getElementById('div2');

var div3=document.getElementById('div3');

div1.addEventListener('click',function(){

alert(this.id);

this.style.borderColor='red';

var self=this.style;

setTimeout(function(){

self.borderColor='black';

},1000)

},false);

div2.addEventListener('click',function(){

alert(this.id);

this.style.borderColor='red';

var self=this.style;

setTimeout(function(){

self.borderColor='black';

},1000)

},false);

div3.addEventListener('click',function(){

alert(this.id);

this.style.borderColor='red';

var self=this.style;

setTimeout(function(){

self.borderColor='black';

},1000)

},false)