index里的this是怎么个触发方式

Question

    <script type="text/javascript">

         

    window.onload = function() {

        var oUl1 = document.getElementById("ul1");

        var aLi = oUl1.getElementsByTagName("li");

        var oDiv = document.getElementById("tab-list");

        var aDiv = oDiv.getElementsByTagName("div");

        for(var i = 0; i < aLi.length; i++) {

            aLi[i].index = i;

            aLi[i].onmouseover = function() {

                for(var i = 0; i < aLi.length; i++) {

                    aLi[i].className = "";

                }

                this.className = "active";

                for(var j = 0; j < aDiv.length; j++) {

                    aDiv[j].className = "hide";

                }

                aDiv[this.index].className = "show";

            }        

        }

    }

    

    

    </script>

  aLi[i].className = "";和aDiv[this.index].className = "show";触发三次之后怎么就和鼠标联系上了，为什么鼠标点哪就可以实现这个语句？（说的不太清楚，我也不知道该怎么说，见谅）

Answer 1

恩  不要着急  慢慢来，以后你会越来越懂。aLi[i].className = ""这句话是让你你的样式变没有。aDiv[this.index].className = "show"这句话是让你的样式显示出来。你很奇怪【this，index】是什么，是指的什么对吧？这个就是指的你鼠标点击了谁。（他不是你说的怎么和鼠标点击连接起来）this就是当前的意思。你点了谁，谁就是thisindex就是下标。比如你点击了第三个。那么index就变成了3（其实是变成了2 因为程序是从零开始的，这个不重要）好了。现在程序知道你点了第三个元素，它就把这个元素加上样式了。

Answer 2

你是想问this指的是什么吗？this指的是执行上下文对象。简单来说：如果是在对象方法上，this指的就是该对象，比如：var obj = {     fn: function(){         // this == obj     } }所以在aLi[i].onmouseover 中的this指的就是aLi[i]这个DOM对象。