首页前端开发正文

onload事件

朱绪2017-06-203086JavaScript

onload和onbeforeunload是JavaScript中常用的页面事件,这篇文章我来简单讲一下onload事件。

在JavaScript中,onload表示文档加载完成后再执行的一个事件。

语法是这样的:

window.onload=function(){
    
}

当然了,并不是所有情况都需要用到window.onload,一般说来,只有在想要“获取页面中某个元素”的时候才用到。

onload事件还是蛮重要的一个事件,用得比较多。

我们来看一个例子:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        var oBtn=document.getElementById("btn");
        oBtn.onclick=function(){
            alert("简单、专注");
        };
    </script>
</head>
<body>
    <input id="btn" type="button" value="提交">
</body>
</html>

浏览器预览效果是一个提交按钮。

我们点这个按钮是没有反应的,浏览器会报错。

这是为什么呢?

这是因为默认情况下,浏览器是从上到下的顺序来解析一个页面的。当解析到“var oBtn=document.getElementById("btn");”这一句的时候它是懵逼的。

懵逼

懵逼的原因在于浏览器在这个时候找不到id为btn的元素,于是就会在那儿困惑:怎么半路杀出个程咬金呢?

解决办法就是使用window.onload。