Skip to content

Commit 1b0b7b8

Browse files
committed
docs(event): edit load / unload event
1 parent 91161ff commit 1b0b7b8

File tree

1 file changed

+8
-4
lines changed

1 file changed

+8
-4
lines changed

docs/events/common.md

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,9 @@ window.addEventListener('beforeunload', function (e) {
2727
});
2828
```
2929

30-
注意,许多手机浏览器默认忽略这个事件,桌面浏览器也有办法忽略这个事件。所以,它可能根本不会生效,不能依赖它来阻止用户关闭窗口。另外,一旦使用了`beforeunload`事件,浏览器就不会缓存当前网页,使用“回退”按钮将重新向服务器请求网页。这是因为监听这个事件的目的,一般是修改初始状态,这时缓存初始页面就没意义了
30+
注意,许多手机浏览器(比如 Safari)默认忽略这个事件,桌面浏览器也有办法忽略这个事件。所以,它可能根本不会生效,不能依赖它来阻止用户关闭浏览器窗口,最好不要使用这个事件
3131

32-
基本上,只有一种场合可以监听`unload`事件,其他情况都不应该监听:用户修改了表单,还没有保存就要离开
32+
另外,一旦使用了`beforeunload`事件,浏览器就不会缓存当前网页,使用“回退”按钮将重新向服务器请求网页。这是因为监听这个事件的目的,一般是为了网页状态,这时缓存页面的初始状态就没意义了
3333

3434
### unload 事件
3535

@@ -45,6 +45,8 @@ window.addEventListener('unload', function(event) {
4545

4646
手机上,浏览器或系统可能会直接丢弃网页,这时该事件根本不会发生。而且跟`beforeunload`事件一样,一旦使用了`unload`事件,浏览器就不会缓存当前网页,理由同上。因此,任何情况下都不应该依赖这个事件,指定网页卸载时要执行的代码,可以考虑完全不使用这个事件。
4747

48+
该事件可以用`pagehide`代替。
49+
4850
### load 事件,error 事件
4951

5052
`load`事件在页面或某个资源加载成功时触发。注意,页面或资源从浏览器缓存加载,并不会触发`load`事件。
@@ -59,13 +61,15 @@ window.addEventListener('load', function(event) {
5961

6062
这三个事件实际上属于进度事件,不仅发生在`document`对象,还发生在各种外部资源上面。浏览网页就是一个加载各种资源的过程,图像(image)、样式表(style sheet)、脚本(script)、视频(video)、音频(audio)、Ajax请求(XMLHttpRequest)等等。这些资源和`document`对象、`window`对象、XMLHttpRequestUpload 对象,都会触发`load`事件和`error`事件。
6163

64+
最后,页面的`load`事件也可以用`pageshow`事件代替。
65+
6266
## session 历史事件
6367

6468
### pageshow 事件,pagehide 事件
6569

6670
默认情况下,浏览器会在当前会话(session)缓存页面,当用户点击“前进/后退”按钮时,浏览器就会从缓存中加载页面。
6771

68-
pageshow 事件在页面加载时触发,包括第一次加载和从缓存加载两种情况。如果要指定页面每次加载(不管是不是从浏览器缓存)时都运行的代码,可以放在这个事件的监听函数。
72+
`pageshow`事件在页面加载时触发,包括第一次加载和从缓存加载两种情况。如果要指定页面每次加载(不管是不是从浏览器缓存)时都运行的代码,可以放在这个事件的监听函数。
6973

7074
第一次加载时,它的触发顺序排在`load`事件后面。从缓存加载时,`load`事件不会触发,因为网页在缓存中的样子通常是`load`事件的监听函数运行后的样子,所以不必重复执行。同理,如果是从缓存中加载页面,网页内初始化的 JavaScript 脚本(比如 DOMContentLoaded 事件的监听函数)也不会执行。
7175

@@ -75,7 +79,7 @@ window.addEventListener('pageshow', function(event) {
7579
});
7680
```
7781

78-
pageshow 事件有一个`persisted`属性,返回一个布尔值。页面第一次加载时,这个属性是`false`;当页面从缓存加载时,这个属性是`true`
82+
`pageshow`事件有一个`persisted`属性,返回一个布尔值。页面第一次加载时,这个属性是`false`;当页面从缓存加载时,这个属性是`true`
7983

8084
```javascript
8185
window.addEventListener('pageshow', function(event){

0 commit comments

Comments
 (0)