script中调用自创建函数出错的问题
今天在练习前端DOM和事件的时候遇到一个问题:通过点击事件调用自定义的方法时直接跳过开始直接执行了方法体的内容。具体的表现是:我需要做一个开关灯的操作,然而在打开页面后直接将灯打开了,且关闭不了。具体代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>开关灯泡</title>
</head>
<body>
<img src="../img/off.gif" id="light">
<script>
var light=document.getElementById("light");
var state=false;
light.onclick= fun();
function fun(){
if (state){
light.src="../img/off.gif";
state=false;
}else{
light.src="../img/on.gif";
state=true;
}
}
</script>
</body>
</html>
进入HTML页面后效果如下:
这显然不是我需要的结果,但idea的控制台和浏览器控制台也没有报错。且这显然是script语句已经执行结束并且页面恢复成静态页面了,于是使用了新的方法:
light.οnclick= function(){
if (state){
light.src="../img/off.gif";
state=false;
}else{
light.src="../img/on.gif";
state=true;
}
}
这个样子使用的时候发现页面又恢复正常:
并且能实现开关灯的操作。查阅资料后发现在script中调用函数加上括号和不加上括号是不同的意思!
当你加上括号之后表示此方法立即执行并且返回方法的结果(由于JavaScript语法较为宽松所以没有返回值的时候也不报错),而调用方法不加括号时则是事件触发后才调用此方法。