script中调用自创建函数出错的问题

最新推荐文章于 2024-09-02 09:14:32 发布

原创最新推荐文章于 2024-09-02 09:14:32 发布 · 272 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #javascript #html5 #jquery

web 专栏收录该内容

14 篇文章

订阅专栏

本文讲述了在前端开发中遇到的一个问题，即在JavaScript中通过事件监听调用自定义函数时，错误地使用了带括号的函数调用方式导致方法在页面加载时立即执行。作者通过对比两种不同的调用方式——带括号和不带括号的差异，解释了为何会出现开关灯操作失效的情况，并给出了修正后的代码。问题在于带括号的调用会导致函数立即执行，而非等待事件触发。最终，作者通过修改为不带括号的事件处理函数定义，成功实现了预期的开关灯效果。

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;
            }
        }

这个样子使用的时候发现页面又恢复正常：

在这里插入图片描述