// 滑过滑过、离开、点击每个选项时
      // 执行脚本
      for(var i=0;i<lis.length;i++){
          lis[i].onmouseover=function(){
              this.style.background='#CCC';
          }
          lis[i].onmouseout=function(){
              this.style.background='#FFF';
          }
          lis[i].onclick=function(event){
              menu.style.display='none';
              title.innerHTML=this.innerHTML;
          }
      }

用 lis 如上执行出来的是蓝色连接样式如图

问题1：其中lis[i].onclick=function(event){
              menu.style.display='none';
              title.innerHTML=this.innerHTML;
          }部分的 this 换成lis[i] 就不行了，为什么？

问题2：改用参考答案as[i]来执行如下：

// 滑过滑过、离开、点击每个选项时
      // 执行脚本
      for(var i=0;i<as.length;i++){
          as[i].onmouseover=function(){
              this.style.background='#CCC';
          }
          as[i].onmouseout=function(){
              this.style.background='#FFF';
          }
          as[i].onclick=function(event){
              menu.style.display='none';
              title.innerHTML=this.innerHTML;
          }
      }

执行效果：

相比用 lis 的效果，为什么会有这样的差异呢？