见注释里的提问，问题还是给某个事件调用函数加不加括号的问题；
慕粉18221508921
2016-11-15 22:41
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>practice</title>
<style type="text/css">
*{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>
<script type="text/javascript">
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 id="div1">
<span id="share">分享</span>
</div>
</body>
</html>
4回答
-
- 幕布斯7328391
- 2016-11-20 17:39:50
首先弄清楚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");}，成功执行函数。
-
- 慕粉18221508921
- 2016-11-16 21:16:31
div1.onmouseover=startMove; /*不加括号，就是正常的，鼠标滑过，开始移动，表示鼠标滑过，调用这个函数*/
div1.onmouseover=startMove();
/*加了括号之后，一打开就开始移动，表示，把函数执行的结果给div1的鼠标滑过事件，所以会去先执行函数，因为函数执行的结果就是offsetLeft==0,然后把这个结果给div1的鼠标滑过事件，所以会出现一打开就跑，这是为了得到函数执行的结果*/
这样解释对不对？
-
- MYX
- 2016-11-16 09:41:36
函数名加括号表示调用并执行该函数，你alert一下有括号和没括号，alert(startMove),,,alert(startMove())
-
- 冷月诗魂
- 2016-11-16 09:38:52
函数名加括号表示调用并执行该函数，你alert一下有括号和没括号，alert(startMove),,,alert(startMove())
JS动画效果
113924 学习 · 1443 问题
相似问题