javascript的事件机制不明白，请高人指点。

<html>
<head>
<script type="text/javascript">
window.onload=function(){
var a = document.getElementsByTagName("a");
for(var i=0; i<a.length; i++){ //运行出来的效果太让我难解了，为什么能够识别我把鼠标
   //放到了相应的标签上，好像i变量不是从for那里获得的，
   //而是从鼠标事件获得的那样，却又没见到如何获得，郁闷
   //请高人指点。
a[i].onmouseover = function(){
this.style.backgroundColor = "green";
}
a[i].onmouseout = function(){
this.style.backgroundColor = "red";
}
}
}</script>
</head>
<body>
<a href="#" id="closureExample">xxxxxxxx</a>
<a href="#" id="closureExample2">yyyyyyy</a>
<a href="#" id="closureExample3">bbbbbbb</a>
<a href="#" id="closureExample4">ccccccc</a>
</body>
</html>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

var a = document.getElementsByTagName("a");
此时，a是一个数组，获取到了页面上所有的a链接对象
a[i].onmouseover = function(){
            this.style.backgroundColor = "green";
        }
        a[i].onmouseout = function(){
            this.style.backgroundColor = "red";
        }
这两句是关键，一个for循环，将每个a链接，加入了鼠标的onmouseover和onmouseout事件，鼠标放到a链接上，变绿色，离开，变红色~
window.onload=function(){
    var a = document.getElementsByTagName("a");
    for(var i=0; i<a.length; i++){ //运行出来的效果太让我难解了，为什么能够识别我把鼠标
                                   //放到了相应的标签上，好像i变量不是从for那里获得的，
                                   //而是从鼠标事件获得的那样，却又没见到如何获得，郁闷
                                   //请高人指点。
        a[i].onmouseover = function(){
            this.style.backgroundColor = "green";
        }
        a[i].onmouseout = function(){
            this.style.backgroundColor = "red";
        }
    }
}这个函数的意思是页面加载后为每个标签为<a>的元素（超链接）添加事件。变量i是循环为超链接添加事件用的。
而后当鼠标在移到和离开超链接时候就会分别调用
a[i].onmouseover和a[i].onmouseout 。
"
for(var i=0; i<a.length; i++){ //运行出来的效果太让我难解了，为什么能够识别我把鼠标
    //放到了相应的标签上，好像i变量不是从for那里获得的，
    //而是从鼠标事件获得的那样，却又没见到如何获得，郁闷
    //请高人指点。
"是的，在当前版本的JavaScript中，没有块作用域！
这个问题比较复杂~~为什么可以这样用。。
你也可以给每个a链接加一个id，然后针对每个a链接进行些onmouseover和onmouseout事件。
如果你是不明白，为什么onmouseover和onmouseout能捕捉到鼠标事件的话这个问题
得去研究一下，javascript语言发明者，他当时为什么这么定义的。具体浏览器是怎么去解析js的问题太深奥了~~
个人觉得：

    var a = document.getElementsByTagName("a");
    for(var i=0; i<a.length; i++){
       //下面的a[i]，获取标签对象，然后再给这个对象添加事件。
        a[i].onmouseover = function(){
            this.style.backgroundColor = "green";
        }
        a[i].onmouseout = function(){
            this.style.backgroundColor = "red";
        }
        //添加事件函数，这个时候和i无关，只是一个a标签对象，然后给这个object添加事件。
         //对象本身已经找到了，何必知道i是什么？
         //或者拆开：
         /*
         var aDom = a[i];
         aDom.onmouover = function(){}; //是否好理解点？
         */
    }
完全正确！
a[i],a本身是个存放了所有a链接的一个对象数组，而a[i]表示具体的某个a链接，你
var aDom = a[i];aDom.onmouover = function(){};
与 a[i].onmouseover = function(){}；效果完全一样，只不过，你的做法是画蛇添足，又搞了个变量！
你在onload里定义的事。在onload也就是页面加载完成的时候，会触发onload事件，这样，会按照你写的给a元素加上相应的代码。分别是
a[0].onmouseover = function(){
            this.style.backgroundColor = "green";
        }
        a[0].onmouseout = function(){
            this.style.backgroundColor = "red";} a[1].onmouseover = function(){
            this.style.backgroundColor = "green";
        }
        a[1].onmouseout = function(){
            this.style.backgroundColor = "red";}
a[2].onmouseover = function(){
            this.style.backgroundColor = "green";
        }
        a[2].onmouseout = function(){
            this.style.backgroundColor = "red";}
a[3].onmouseover = function(){
            this.style.backgroundColor = "green";
        }
        a[3].onmouseout = function(){
            this.style.backgroundColor = "red";
}而a[0]-a[3]分别对应你定义的四个a元素。