javascript - 关于星级评分部分问题原理不懂。

Question

想了一下午就是搞不懂onmouseout跟onclick是怎么关联到的？
自己只做出移入移出效果。。
下面代码是参考别人后添加进自己代码的。
为什么加个变量NUM？onmouseout跟onclick是怎么关联到的？

window.onload = function(){
            var ospan = document.getElementsByTagName('span')[0];
            var aimg = document.getElementsByTagName('img');
            var arrText = ['很差','较差','还行','推荐','力荐']
            var num = -1;
            for(var i=0;i<aimg.length;i++){
                aimg[i].index = i;
                aimg[i].onmouseover = function(){
                    for(var i=0;i<aimg.length;i++){
                            aimg[i].src = 'star_onmouseout.png'                              
                    }; 
                    for(var i=0;i<aimg.length;i++){
                        if(i<=this.index){
                            aimg[i].src = 'star_onmouseover.png'
                            ospan.innerHTML = arrText[this.index]
                        };
                    };                  
                }; 
                aimg[i].onmouseout = function(){
                     for(var i=0;i<aimg.length;i++){
                            aimg[i].src = 'star_onmouseout.png'  
                            ospan.innerHTML = '' 
                    };  
                    for(var j=0;j<=num;j++){
                        aimg[j].src = 'star_onmouseover.png'
                    }
                };
                aimg[i].onclick = function(){
                    num = this.index  //为什么这里能关联到？
                };
            };
        };

Answer 1

他这个代码总体思路是这样的：

1. 鼠标移上图片的时候，根据鼠标指向的是第几个图片，用代码把位于鼠标之前的图片设置为高亮(onmouseover事件)

2. 鼠标移出图片的时候，根据用户最后一次所选的评分把图片设置为高亮（onmouseout事件）。这个评分标准就是num的值

3. 鼠标点击图片的时候，根据点击的是哪个星级的图片，把num设置为相应的星级（onclick事件）

所以，点击后，num的值就会改变，当用户下次把鼠标移出图片，发生onmouseout事件的时候，这个评分已经变了，所以显示的分数也会变成用户最后一次选择的那个分数。