onclick函数不能写在window.onload = fun

2022-06-27 本文已影响0人马佳乐

错误代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
            <button id="btn" onclick="clickBtn()">按钮</button>
    </body>
</html>
<script>
    window.onload = function(){
        function clickBtn(){
            console.log("点击了");
        }
    }
</script>

如上面代码。onclick函数不能写在window.onload = function(){}里，运行没有效果。

控制台报"Uncaught ReferenceError: clickBtn is not defined"错误。

错误原因

查了一下，是作用域的问题。放在window.onload里面改变了clickBtn()函数的做用域，使其成为内部函数，所以onclick=""没法访问到这个函数

更改方式一：

而放到外面clickBtn()是绑定在window上的，因此onclick=""可以访问到。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <button id="btn" onclick="clickBtn()">按钮</button>
    </body>

</html>
<script>
    window.onload = function() {

    }

    function clickBtn() {
        console.log("点击了");
    }
</script>

如果就想在页面加载完成以后再执行函数，可用下面方式：

更改方式二，采用对象.函数，将onload()里面函数的作用域绑定在window上：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <button id="btn" onclick="clickBtn()">按钮</button>
    </body>

</html>
<script>
    window.onload = function() {
        var btn = document.getElementById("btn");
        btn.clickBtn = function(){
            console.log("点击了");
        }
    }
</script>

更改方式三，添加事件监听器：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <button id="btn">按钮</button>
    </body>

</html>
<script>
    window.onload = function() {
        function clickBtn(){
            console.log("点击了");
        }
        var btn = document.getElementById("btn");
        btn.addEventListener("click",clickBtn);
    }
</script>

同理，像鼠标移入、移出等这些人为触发的函数，也不能直接写在window.onload = function(){}里

用法同上