页面事件 - JavaScript | 绿叶学习网

之前我们学了各种事件，除了这些事件之外，还有一种非常重要的事件：页面事件。在JavaScript中，常用的页面事件只有两个。

一、onload

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

语法：

window.onload = function(){
    ……
}

说明：

并不是所有情况都需要用到window.onload的，一般来说，只有在想要“获取页面中某一个元素”的时候才会用到。onload事件非常重要，也是JavaScript中用得最多的事件之一，我们在此之前应该见识到了。

举例：


在线测试
<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        var oBtn = document.getElementById("btn");
        oBtn.onclick = function () 
        {
            alert("JavaScript");
        };
    </script>
</head>
<body>
    <input id="btn" type="button" value="提交" />
</body>
</html>

浏览器预览效果如图所示。

分析：

当我们点击【提交】按钮时，浏览器会报错。这是因为在默认情况下，浏览器是从上到下来解析一个页面的。当解析到var oBtn = document.getElementById("btn");这一句时，浏览器找不到id为btn的元素，然后就会感到很疑惑：怎么半路杀出个不认识的程咬金来呢？

正确的解决方法就是使用window.onload，实现代码如下：


在线测试
<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            var oBtn = document.getElementById("btn");
            oBtn.onclick = function () 
            {
                alert("JavaScript");
            };
        }
    </script>
</head>
<body>
    <input id="btn" type="button" value="提交" />
</body>
</html>

浏览器预览效果如图所示。

分析：

这里，浏览器从上到下解析到window.onload时，就会先不解析window.onload里面的代码，而是继续往下解析，直到把整个HTML文档解析完了之后才会回去执行window.onload里面的代码。这个时候，就算程咬金不报上名号，人家都知道是他来了。

有人就会问了，在下面这个例子中，为什么不需要加上window.onload也可以获取到元素呢？

举例：


在线测试
<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        function change()
        {
            var oTitle = document.getElementById("title");
            oTitle.style.color = "white";
            oTitle.style.backgroundColor = "hotpink";
        }
    </script>
</head>
<body>
    <h3 id="title">绿叶学习网</h3>
    <input type="button" value="改变样式" onclick="change()" />
</body>
</html>

浏览器预览效果如图所示。

分析：

对于函数来说，有一句非常重要的话，不知道小伙伴还记得没有：如果一个函数仅仅是定义而没有被调用的话，则函数本身是不会执行的。

从上面我们可以知道，浏览器从上到下解析HTML文档，当它解析到函数的定义部分时，它也会直接跳过。如果浏览器立刻解析的话，那函数岂不是自动执行了？那这还是函数么？

这里的函数是在用户点击这个按钮的时候执行的，那时候文档已经加载好了。

二、onbeforeunload

在JavaScript中，onbeforeunload表示离开页面之前触发的一个事件。

语法：

window.onbeforeunload = function(){
    ……
}

说明：

与window.onload相对的应该是window.onunload，不过一般情况下我们极少用到window.onunload，而更倾向于使用window.onbeforeunload。

举例：


在线测试
<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            alert("欢迎来到绿叶学习网！");
        }
        window.onbeforeunload = function (e) 
        {
            e.returnValue = "记得下来再来喔！";
        }
    </script>
</head>
<body>
</body>
</html>

打开页面的时候，浏览器预览效果如图所示

关闭页面的时候，浏览器预览效果如图所示。

分析：

e是一个event对象。对于event对象，我们在下一章会详细介绍。