JavaScript中onload和unload用法_unload window-CSDN博客

本文深入解析JavaScript中window.onload和window.unload事件的使用场景及重要性。window.onload确保DOM完全加载后再执行JS代码，避免因元素未加载导致的错误。window.unload则在页面卸载时触发，常用于清理引用防止内存泄漏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

window.onload: 页面加载完成后执行
一，window.onload的用法：
因为页面中的代码一般情况下按照，从上到下，从左到右的顺序执行。
所以当js代码需要获取页面中的元素时，如果script标签在元素的前面，需要加window.onload；如果script放在了元素后面，就不需要加 window.onload。
例一：点击按钮，实现div变大的效果（宽，高，增加200像素）。

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

    <style type="text/css">
        #box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
    <script type="text/javascript">           
        document.getElementById("btn").onclick=function(){
            document.getElementById("box").style.width="400px";
            document.getElementById("box").style.height="400px";
        }
    </script>
</head>
<body>
    <input type="button" name="btn" id="btn" value="确认">
    <div id="box"></div>
</body>

注：例一在点击确认按钮时，页面上div并没有任何变化，原因是，由于程序是从上往下开始执行，运行到document.getElementById(“btn”)时，并没有发现“btn”这个元素，所以就会提示错误信息（null），此时的程序运行时也就没有任何JavaScript效果。

二，问题解决
把JavaScript中要执行的程序放在window.οnlοad=function(){}中，如例二：
例二：正确的代码

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

    <style type="text/css">
        #box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
    <script type="text/javascript">
        window.onload=function(){
            document.getElementById("btn").onclick=function(){
            document.getElementById("box").style.width="400px";
            document.getElementById("box").style.height="400px";
        }
        }
    </script>
</head>
<body>
    <input type="button" name="btn" id="btn" value="确认">
    <div id="box"></div>
</body>

window.unload: 文档被完全卸载后触发

只要用户从一个页面切换到另一个页面，就会触发unload事件。而利用这个事件最多的情况是清除引用，以免内存泄漏。

本文转自 https://blog.csdn.net/nuan__nuan/article/details/72825719