JavaScript 事件

最新推荐文章于 2024-10-11 20:16:49 发布

52Tiramisu

最新推荐文章于 2024-10-11 20:16:49 发布

阅读量72

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/gsj9086/article/details/115507287

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍了页面加载事件.onload的三种使用方法：静态注册单句代码、静态注册多句代码通过函数调用以及动态注册。通过示例代码展示了如何在HTML文档中利用.onload确保JavaScript代码在页面完全加载后执行。

摘要由CSDN通过智能技术生成

onload

当页面载入完毕后执行Javascript代码。

静态注册，

只执行一句JavaScript代码：只在body的标签内写 onload

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body onload="alert('静态注册，只执行一句代码，可以在这里写')">
    
</body>
</html>

静态注册，

可能执行多句JavaScript代码：先在head标签中写js代码函数，然后在body标签中调用这个在head标签中定义的js代码函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        alert('静态注册，执行多句代码，以这种函数的形式');
    </script>
</head>
<body onload="onLoadFun();">
    
</body>
</html>

动态注册

直接在head标签的js代码中写：window.onload()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        window.onload = function(){
            alert("动态注册的onload事件");
        }
    </script>
</head>
<body>
    
</body>
</html>