之前我们学了各种事件,除了这些事件之外,还有一种非常重要的事件:页面事件。在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对象,我们在下一章会详细介绍。