JavaScript 入口函数

最新推荐文章于 2023-12-23 21:55:15 发布

月宫

最新推荐文章于 2023-12-23 21:55:15 发布

阅读量1k

点赞数

分类专栏： JavaScript 文章标签： javascript js

本文链接：https://blog.csdn.net/sannight/article/details/117390048

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML页面加载是自上而下的，当script标签写在html标签前时，script标签引用script标签后html标签时，会导致引用失败（标签不存在 null）

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <script>
        var p = document.querySelector('p');
        console.log(p);//结果为 null
    </script>
    <p>错误示范</p>
</body>

</html>

解决办法是用入口函数把JS代码包起来

使用了入口函数，JS代码将在HTML页面加载完之后执行

格式：

window.onload = function(){ //js代码 }

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <script>
        window.onload = function () {
            var p = document.querySelector('p');
            console.log(p);//结果为 <p>错误示范</p>
        }
    </script>
    <p>错误示范</p>
</body>

</html>

注：此入口函数只能存在一个（最后的，其余将被覆盖）

如有多个，请使用事件监听 addEventListener('事件类型',回调函数);

格式：

window.addEventListener('load', function(){ js代码 });

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <script>
        window.addEventListener('load', function () {
            var p = document.querySelector('p');
            console.log(p);//结果为 <p>错误示范</p>
        });
    </script>
    <p>错误示范</p>
    <script>
        window.addEventListener('load', function () {
            console.log("入口函数");//结果为 "入口函数"
        });
    </script>
</body>

</html>