                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JS动画效果

见注释里的提问，问题还是给某个事件调用函数加不加括号的问题；

<!DOCTYPE html>

<html>

<head>

<title>practice</title>

*{margin:0px;padding:0px;}

#div1 {position:relative;left:-200px;width:200px;height:200px;margin-top:50px;background-color: pink;}

#share{background-color:lightblue;width:20px;height:50px;position: absolute;left:200px;top:75px;}

</style>

window.onload=function(){

var div1=document.getElementById("div1");

/*div1.onmouseover=startMove; */ /*不加括号，就是正常的，鼠标放上，开始移动；*/

div1.onmouseover=startMove(); /*为什么加了括号之后，一打开就开始移动，鼠标不放上去也是移动的；*/

};

var timer=null;

function startMove(){

var div1=document.getElementById("div1");

timer=setInterval(

function(){

if(div1.offsetLeft==0){clearInterval(timer)}

else {div1.style.left=div1.offsetLeft+10+'px'}}

,30);

}

</script>

</head>

<body>

</div>

</body>

</html>

慕粉18221508921

2016-11-15

源自：JS动画效果 2-1

关注问题我要回答

906

操作

收起

4 回答

幕布斯7328391 回答被采纳 +3 积分
2016-11-20

首先弄清楚startMove; 和startMove();区别，第一个是函数本身，第二个是函数执行的结果。

假设a = b + c，那此公式会先计算b+c再赋值给a。

我们看div1.onmouseover=startMove();，先计算startMove()，那么此时已经运行了startMove函数并执行了函数，所以一打开就会看到物体移动的现象。而我们看div1.onmouseover=startMove;是将函数代码本身赋值给前面，当鼠标经过的时候，div1.onmouseover会变成如下所示：

div1.onmouseover= function startMove(){
    var div1=document.getElementById("div1");
    timer=setInterval(function(){
        if(div1.offsetLeft==0){clearInterval(timer)}
        else {div1.style.left=div1.offsetLeft+10+'px'}
      },30);
};

如同，div1.onmouseover = function(){ alert("aaa");}，成功执行函数。