document对象和window的常用事件

逃离我推掉我的手 2023-07-13 03:56 20阅读 0赞

## document ##

#### readystatechange ####

当document.readyState的值发生变化时就会触发以上事件

readyState的值有：  
1. loading  
DOM还在加载中（此时貌似js还没开始执行，js里捕获不到这个状态）  
2. interactive  
DOM已经加载完毕，css，图片，iframe里的页面还没加载完（$(document).ready()就是指这个时候  
即触发DOMContentLoaded的时候`document.addEventListener('DOMContentLoaded', function () {})`  
3. complete  
DOM CSS 图片等全都加载完毕（window.onload就是这个时候）

#### visibilitychange ####

不咋用到。跟显示/隐藏有关系；

## window ##

#### load ####

window.onload(也就是document.readyState === 'interactive’的时候)

#### unload ####

页面正处在一种资源依然存在，但是页面已经不可见的时候。  
不能再交互了。  
这个事件是不可被阻止的。  
如果监听了这个事件（即使什么也不做）会破坏BFCache(前进/后退 缓存)。前进后退时，会重新请求页面。

#### beforeunload ####

这个时候还可以进行交互，不过不能用alert，confirm，prompt，会被忽略掉。

// 只能通过这个方法来询问
    window.addEventListener("beforeunload", function (e) { 
       var confirmationMessage = "是否离开";
       e.returnValue = confirmationMessage; // Gecko, Trident, Chrome 34+
       return confirmationMessage; // Gecko, WebKit, Chrome <34
    	// window.alert('确定要离开？')
    });

监听这个事件也会破坏BFCache。

#### pageshow ####

在页面被显示的时候触发。  
例如：

*  前进/后退并显示页面内容的时候触发；
 *  新页面onload后触发；

这个事件的事件对象多一个属性，persisted（页面是刚下载的还是从缓存里读取的）

#### pagehide ####

页面跳转走或者关闭之前的瞬间