JS--JavaScript页面事件（页面初始化onload、页面卸载onunload）、beforeunload事件

布满荆棘的人生 2021-08-13 23:33 636阅读 0赞

#### 页面初始化 ####

load事件类型在页面完全加载完毕的时候触发。该事件包含所有的图形图像、外部文件（如CSS、JS文件等）的加载，也就是说，在页面所有内容全部加载之前，任何DOM操作都不会发生。为window对象绑定load事件类型的方法有两种：

**1. 直接为window对象注册页面初始化事件处理函数：**

window.onload = function(){ 
    	alert("页面加载完毕");
    }

**2. 在页面< body >标签中定义onload事件处理属性：**

<body onload="f()">
    <script>
    	function f(){ 
    		alert("页面加载完毕");
    	}
    </script>

注意：如果同时使用上面两种方法定义页面初始化事件类型，它们并没有发生冲突，也不会出现两次触发事件。

JavaScript解释器在编译时，如果发现同时使用两种方法定义load事件类型，会使用window对象注册的事件处理函数覆盖掉body元素定义的页面初始化事件属性。

#### 页面卸载 ####

unload表示卸载的意思，这个事件在从当前浏览器窗口内移动文档的位置时触发，也就是说，通过超链接、前进或后退按钮等方式从一个页面跳转到其他页面，或者关闭浏览器窗口时触发。

window.onunload = f;
    function f(){ 
    	alert("888");
    }

在unload事件类型中无法有效阻止默认行为，因为该事件结束后，页面将不复存在。由于在窗口关闭或离开页面之前只有很短的时间来执行时间处理函数，所以不建议使用该事件类型。**使用该事件类型的最佳方式是取消该页面对象的引用。**

#### beforeunload事件 ####

beforeunload事件类型与unload事件类型功能相似，不过它更人性化，如果beforunload事件处理函数返回字符串信息，那么该字符串会显示一个确认对话框，询问用户是否离开当前页面。

示例：

window.onbeforeunload = function(e){ 
    	return "您的数据还未保存！";
    }

![在这里插入图片描述][20190927200422758.png]

[20190927200422758.png]: /images/20210813/40f600ffb2fc43c8b6c2f6d1f3a0210a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，636人围观）

还没有评论，来说两句吧...

相关阅读

相关【小程序】页面事件

目录下拉刷新事件 1. 什么是下拉刷新 2. 启用下拉刷新 3. 配置下拉刷新窗口的样式 4. 监听页面的下拉刷新事件 5. 停止下拉刷新的效果上拉触底事件

深碍√TFBOYSˉ_/ 2024年03月30日 11:46/ 0 赞/ 158 阅读

相关页面导航，页面事件，生命周期，wxs脚本

页面导航 1、什么是页面导航页面导航指的是页面之间的相互跳转。例如，浏览器中实现页面导航的方式有如下两种： < a >链接 location.hre

约定不等于承诺〃/ 2024年03月24日 14:59/ 0 赞/ 212 阅读

相关记：uniapp返回页面不触发onLoad事件

记录前言解决方案注意事项前言在uni中，我们返回上一页的时候，会发现onLoad方法没有作用；解决方案其实在uni中

╰+攻爆jí腚メ/ 2023年07月19日 12:12/ 0 赞/ 138 阅读

相关 jQuery的页面加载完毕事件？

很多时候我们需要获取元素，但是必须等到该元素被加载完成后才能获取。我们可以把js代码放到该元素的后面，但是这样就会造成js在我们的body中存在不好管理。所有页面加载完毕后所有

Dear 丶/ 2023年02月25日 07:19/ 0 赞/ 49 阅读

相关页面加载的事件

`Document.readyState` 属性描述了[`document`][document] 的加载状态。所以要特别注意下面的两个事件“readystatechange”

落日映苍穹つ/ 2022年12月17日 11:53/ 0 赞/ 336 阅读

相关 js页面加载之前触发的事件

<script> $(document).ready(function(){ var param

朱雀/ 2022年08月18日 11:56/ 0 赞/ 474 阅读

相关 jQuery页面加载响应事件

$(document).ready()方法是事件模块中最重要的一个函数，它极大地提高了Web响应速度。 $(document)是获取整个文档对象，从这个方法名称来理解，就是获

比眉伴天荒/ 2022年05月12日 00:38/ 0 赞/ 418 阅读

相关页面滚动监听事件

滚动监听事件一般网页中的返回顶部按钮都是通过滚动监听事件来实现的这个例子是当滚动条下拉到一定程度之后，某个元素中的所有内容都变成fixed ![4444][]

红太狼/ 2022年02月01日 02:51/ 0 赞/ 654 阅读

相关子页面监听父页面事件

父页面a.html <select id="a" onchange="aaa()"> <option>1</option> <option>2</op

怼烎@/ 2022年01月22日 09:07/ 0 赞/ 563 阅读

相关 JS--JavaScript页面事件（页面初始化onload、页面卸载onunload）、beforeunload事件

页面初始化 load事件类型在页面完全加载完毕的时候触发。该事件包含所有的图形图像、外部文件（如CSS、JS文件等）的加载，也就是说，在页面所有内容全部加载之前，任何DO

布满荆棘的人生/ 2021年08月13日 23:33/ 0 赞/ 637 阅读