                        課程
                    
                        /前端開發
                        
                            /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

關注問題我要回答

981

操作

收起

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");}，成功執行函數。