码迷,mamicode.com
首页 > 其他好文 > 详细

onload事件

时间:2018-08-31 17:09:50      阅读:223      评论:0      收藏:0      [点我收藏+]

标签:nload   type   class   分享图片   报错   script   click   hello   http   

onload事件:页面加载(文本和图片)完毕的时候,

onload的作用:

  1. 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 id="btn">点击</button>
        </body>
    </html>

    技术分享图片

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

window.onload可以预防使用标签在定义之前,即实现JS代码于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 id="btn">点击</button>
    </body>
</html>

同步与异步:

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

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

onload事件

标签:nload   type   class   分享图片   报错   script   click   hello   http   

原文地址:https://www.cnblogs.com/zhang-jiao/p/9566350.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!