请问为什么不能这样写? 这个this代表的不是鼠标点击的这个Li 标签吗?

来源:4-3 [DOM事件] QQ面板状态切换效果

Coffeeed

2017-03-04 15:09


window.onload=function (){

    //切换面板事件

    var oShow=document.getElementById('loginStateShow');

    var oTxt=document.getElementById('login2qq_state_txt');

    var oUl=document.getElementById('loginStatePanel');

    var oLis=document.getElementsByTagName('li');

    var oState=document.getElementById('loginState');

    oState.onclick=function() {

        oUl.style.display='block';

    }

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

        oLis[i].onmouseover=function(){

            this.style.background='#567';

        }

        oLis[i].onmouseout=function(){

            this.style.background='#FFF';

        }

        oLis[i].onclick=function(){

            oUl.style.display='none';

            oTxt.innerHTML=oLis[i].childNodes[1].innerHTML;

            var id=oLis[i].id;

            oShow.className='';

            oShow.className="login2qq_state_txt"+id;

        }

    }

    

    


}


写回答 关注

1回答

  • frontendsophie
    2017-03-05 17:17:43
    已采纳

    - -这么写有报错吗,this还能规避闭包的问题,就是如果要给所有<li>绑事件,不如事件委托绑<ul>上去。

    fronte... 回复Coffee...

    同理如果我用事件委托给oUl绑这个事件,就是oUl.onmouseout=function(){this.style.background='#fff';},那么这个时候this就会指向oUl。那如果指向oUl,一碰到<ul>这个大块,整个<ul>的背景就会变色,就达不到我要给每个Li单独变色的目的。而如果使用event.target,它还是指向直接接受事件的目标DOM元素,也就是指向当前鼠标指向的<li>,所以此时就必须写成oUl.onmouseout=function(event){event.target.style.background='#fff';}。

    2017-03-06 20:27:36

    共 4 条回复 >

DOM事件探秘

DOM事件?本课程会通过实例来给小伙伴们讲解如何使用这些事件

99532 学习 · 1300 问题

查看课程

相似问题