onload事件 - 爱码网

onload事件：页面加载（文本和图片）完毕的时候，

onload的作用：

JS加载时和html是同步加载的，如果使用元素在定义元素之前易报错；

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script>
            var btn=document.getElementById("btn");
            btn.onclick=function(){
                alert("Hello JavaScript!");
            };
            
        </script>
    </head>
    <body>
        <button >点击</button>
    </body>
</html>

onload事件

整个页面上所有元素加载完毕后再执行js的内容

window.onload可以预防使用标签在定义之前，即实现ＪＳ代码于html页面的异步加载

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script>
            window.onload=function(){
                var btn=document.getElementById("btn");
                btn.onclick=function(){
                    alert("Hello Javascript!");
                }
            }
        </script>
    </head>
    <body>
        <button >点击</button>
    </body>
</html>

同步与异步：

1.生活中同步是所有的事一起执行，异步是事件一件一件的执行

2.web中同步是事件一件一件的执行，异步是所有的事一起执行