【JavaScript】一个简单的隔行变色，鼠标移入移出的问题

Question

为什么此处只能用this，如果把this换成oLis就是错的？ <script type="text/javascript">     var oLi = document.getElementsByTagName("li");     for (var i = 0; i < oLi.length; i++) {         var oLis = oLi[i];         i % 2 === 0 ? (oLis.className = "c1" , oLis.old = "c1") : (oLis.className = "c2", oLis.old = "c2");         oLis.onmouseover = function () {             this.className = "c3"; //为什么此处只能用this，如果把this换成oLis就是错的？         };         oLis.onmouseout = function () {             this.className = this.old;         };     } </script>

Answer 1

首先说下this。this是指向事件的调用者。
然后

  var oLi = document.getElementsByTagName("li");

获取到的是伪数组。所有的li元素都放入oLi变量里面了。
其次for循环语句 里面的

  var oLis = oLi[i];

是把当前循环的 i 作为变量oLi的索引值，找到oLi伪数组当前执行的li元素。for每循环一次都会创建一个oLis，也就是一共有。。。你有多少li我就有多少oLis。

 oLis.onmouseover = function () {
            this.className = "c3"; //为什么此处只能用this，如果把this换成oLis就是错的？
        };

这个语句的意思就是当鼠标移入当前li的时候当前li的样式发生改变。前面说了，this指向事件的调用者。这里鼠标移入的调用者是oLis，也就是for语句当前这个循环里面的li。for循环里面有很多oLis，这里调用的是当前循环的oLis。
如果把this换成oLis那么就不一定指的是当前循环的oLis。它可能指的是for语句执行完毕后oLis，当然会报错了。用this指向当前调用对象li元素，用oLis就不一定是当前的li了。
例如

var count = 10;
for (var i=0; i<count; i++) {
    console.log(i);
}
alert(i);    // 这里弹出10

最后弹出的结果并不是哪一个循环里面的i，而是最后的10. 不知这样讲解能不能清楚。

Answer 2

 这个是经典的闭包问题，执行完for oLis是最后的li对象了，不是当前遍历到的li对象，所以都是操作左后一个。this是触发事件的当前对象，所以有用。

做个闭包就可以了


 (function (oLis) {///////
            oLis.onmouseover = function () {
                oLis.className = "c3"; 
            };
            oLis.onmouseout = function () {
                oLis.className = oLis.old;
            };
        })(oLis)/////////////////

Answer 3

该函数是事件处理程序，当事件触发时，该函数才会执行，也就是this.className = "c3"才会执行。那么当事件触发，函数执行时，
如果语句是oLis.className="c3",那么程序会向前找到oLis指向的对象。正如我们知道，函数执行肯定发生在for循环执行之后，所以
此时的oLis指向的是最后一个li，所以不管鼠标移到哪一个li上，都是最后一个li的样式发生变化。而如果语句是this.className="c3"
的话，this指向的是触发事件的对象，也就是当前的li对象，所以对应的li的样式就会发生改变。
总之，最重要的是要理解当事件触发、函数执行时，this和oLis分别指向的哪个对象。

Answer 4

this代表的是你当前选中的那个li

Answer 5

this表示当前li对象，而oLis是最后的li对象

Answer 6

this是在回调函数使用的，oLis当前对像