页面事件详解-优快云博客

本文详细介绍了页面事件如load、beforeunload等的功能及应用，并探讨了beforeunload事件可能触发两次的原因。通过示例代码展示了如何使用这些事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面事件有load, beforeunload, error, resize, scroll, unload，传说它们明确地处理整个页面的函数和状态。

疑问：离开页面的时候为什么有时会执行两次beforeunload事件？


window.onload = function()
{
    //事件在完全加载完毕后触发
    alert("page loaded........");
}

window.onbeforeunload = function()
{
    //与beforeunload与unload事件最大的区别在于，如果beforeunload事件的返回的是一个字符串，那么字符串就会就会显示在一个确认窗口中，询问用户是否希望离开当前窗口。
    //疑问：离开页面的时候为什么有时会执行两次beforeunload事件？
    return "Are you sure to exit?";
}

window.onerror = function (msg)
{
    //创建一个li元素来保存错误信息
    //var li = document.createElement('li');
    //li.innerHTML = msg;

    alert("error....\n" + msg);
}

window.onresize = function()
{
    //完成重置后触发
    alert("You resized the window!");
}

window.onunload = function()
{
    //对于此事件，阻止默认行为对它无效
    //window.event.returnValue = false;

    alert("Thanks for visting!");
}

下面是页面代码：


<html>
<head>

<title></title>
<script language="javascript" type="text/javascript" src="documentevent.js">
</script>
</head>

<body>
<center>
    <h1>测试页面事件</h1>
    <br/>
    <a href="http://love2java.iteye.com">leave the page</a>
    <h3>就这简单页面，点链接离开页面时，有时会执行两次beforeunload事件!</h3>
</center>
</body>

</html>

页面事件示例与疑问