请问为什么这两种方式调用函数一个有效果另一个没有效果?//注释中是另一种方式

<!doctype html>
<html lang=”en”>
<head>

<meta charset="UTF-8">
<title>Clear float</title>
<style>
body{
    margin:0;
    padding:0;
    font-family: "Microsoft Yahei";
    font-size:10px;
}
#div1{
    width: 200px;
    height: 200px;
    background-color: red;
    position: relative;
    left: -200px;
    top:0;
}
#share{
    width: 30px;
    height: 50px;
    background-color: blue;
    color:#fff;
    text-align: center;
    line-height: 50px;
    position: absolute;
    left: 200px;
    top: 75px;
    cursor: pointer;
}
</style>

</head>
<body>

<div id="div1">
    <span id="share">详情</span>
</div>

<script type=”text/javascript“>

  window.onload=function(){
    var oDiv=document.getElementById("div1");
    oDiv.onmouseover=function(){
        startMove(1);
    }    
    oDiv.onmouseout=function(){
        startMove(0);
    }

    //oDiv.onmouseover=startMove(1);
    
    //oDiv.onmouseout=startMove(0);

    
}
var timer=null;
function startMove(x){
    clearInterval(timer);
    var div1=document.getElementById("div1");
    timer=setInterval(function(){
        if(x==1&&div1.offsetLeft<0){
            div1.style.left=div1.offsetLeft+10+'px';
        }
        else if(x==0&&div1.offsetLeft>-200){
            div1.style.left=div1.offsetLeft-10+'px';
        }
    },30)
}

    

</script>
</body>
</html>

oDiv.onmouseover 的值是处理 onmouseover 事件的事件处理函数。

startMove(1) ,因为函数名后面加了 () ,所以函数立即执行了,并且执行结果的返回值是 undefined。所以
oDiv.onmouseover = startMove(1) 就等同于 oDiv.onmouseover = undefined。所以无效。

注释的代码,绑定上去的是startMove()方式的返回值;看下下面的代码,同样的道理;

oDiv.onmouseover=startMove(1);
oDiv.onmouseout=startMove(0);
**1、startMove(1)、startMove(0) 这两个函数的返回值均为 undefined
2、javascript没有重载,在相同的作用域里,后面的startMove(0)、会覆盖前面的startMove(1)**

绑定匿名函数:

oDiv.onmouseover=function(event){
    startMove(1);
}
oDiv.onmouseout=function(event){
    startMove(0);
}

绑定外部通用函数,

oDiv.onmouseover=startMove;
oDiv.onmouseout=startMove;

楼主注释的写法,相当于执行函数

oDiv.onmouseover=startMove(1);
oDiv.onmouseout=startMove(0);

下面这种相当于动态调用函数(有点eval的意思),因此不会传入event对象,同时,如果用this指向的是window,不再是触发事件的dom对象。

<div id="div1" onmouseover="startMove(0)" onmouseout="startMove(1)">
    <span id="share">详情</span>
</div>
  • webstorm添加文件怎么自动git add
  • 微信小程序如何获取当地地理位置
  • 用ajax获取json数据。页面上显示节点已经成功创建。但获取类名,控制台显示该对象集合长度为0,为什么长度为0?
  • 一个js的闭包问题?
  • JS不换行输出到控制台的语句是什么?
  • 求指导这个while循环的结果
  • 打开localhost提示__WEBPACK_AMD_DEFINE_ARRAY__ is not defined
  • 在此基础上如何实现图片压缩上传?
  • 请问以下两种通过原型继承创建一个新对象的方式有何不同,请说明原因?
  • 页面返回上一层 重复返回已处理过的数据?
  • js中的queue如何使用?