为了账号安全,请及时绑定邮箱和手机立即绑定

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


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 回答

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

1 回复 有任何疑惑可以回复我~
#1

frontendsophie

不过在给<ul>绑定变背景色的时候,就不能用this了,因为那时this会指向整个<ul>,就必须用event.target来给单个<li>来变色了,这就是区别吧。event.target永远是直接接受事件的目标DOM元素。
2017-03-05 回复 有任何疑惑可以回复我~
#2

Coffeeed 提问者

谢谢你呀 虽然我没太懂 还是谢谢了。
2017-03-06 回复 有任何疑惑可以回复我~
#3

frontendsophie 回复 Coffeeed 提问者

oLis[i].onmouseout=function(){this.style.background='#FFF';} 这种函数调用是方法式调用,这时this会指向当前调用方法的对象,也就是oLis[i],也就是当前鼠标指向的<li>,而event.target指向的永远是直接接受事件的目标DOM元素,所以event.target也指向鼠标指向的<li>,此时this与event.target等价。
2017-03-06 回复 有任何疑惑可以回复我~
#4

frontendsophie 回复 Coffeeed 提问者

同理如果我用事件委托给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 回复 有任何疑惑可以回复我~
查看1条回复

举报

0/150
提交
取消

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

我要回答 关注问题
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号