BOM 事件

@Events
内容 Contents
beforeunload
load
resize
online/offline
copy/cut/paste
.除了这些事件，还有很多事件可以从 Document 冒泡过来 - many events can bubble from the Document contained in the window object
.更多 Window 事件，请访问 Window - events
加载完毕 load
.为了保证 JavaScript 执行时，相关的元素已经准备完毕， JavaScript 代码通常写在<body>最后面。如果使用 load 就可以把代码放在任何地方
.如果加载内容过多，load 会占用更多时间，影响用户体验。可以采用 DOMContentLoaded方法。只要 DOM 框架出来即可，不需要渲染CSS/FLASH/图片，且不影响交互
.如果两个事件都定义了，则先执行 DOMContentLoaded 再执行 load
.通常用作初始化
window.addEventListener('load', () => {
    console.log('load');
})      
window.onload = function () { 
    //... ...
}
window.addEventListener('DOMContentLoaded', () => { 
    //... ...
})
卸载前 beforeunload
.设置返回值，这将触发浏览器的标准确认对话框，无法自定义UI
window.addEventListener('beforeunload', (event) => {
    event.returnValue = '您确定要离开此页面吗？';
    console.log('beforeunload');
});
窗口缩放 resize
.窗口尺寸/大小发生变化触发事件
.响应式布局经常用到
window.addEventListener('resize', () => {
    //... ...
})
[] 动态调整字体大小
.20是选定的参考字体大小；通常选择16px，可以根据需要调整
.320是选定的设备宽度，通常参照苹果某个型号，如iPhone6/7/8是375px
.40是最大字号
.如果使用16px、375px，检查元素并使用iPhone6/7/8，发现HTML字体大小被动态设置为16px
.以下代码要放到 <head>，优先执行
let setFontSize = () => {
  let w = document.documentElement.clientWidth;
  let size = (20 * (w / 320) > 40 ? 40 + 'px' : (20 * (w / 320) + 'px'))
  document.documentElement.style.fontSize = size;
}
window.addEventListener('load', setFontSize)
window.addEventListener('resize', setFontSize)
网络连接事件 Connection events
.网络链接状态检测
.状态变化时才会触发
1. online
2. offline 
window.addEventListener('online', () => {
    console.log('online');
})
window.addEventListener('offline', () => {
    console.log('offline');
})
剪切板事件 Clipboard events

.针对窗口的操作，不限于文档内容外，还有其它内容，如复制 URL，涵盖面更广

.事件的原始目标是 元素 Element，可以在捕获或冒泡阶段响应并处理

copy
cut
paste
[] 阻止页面复制和粘贴
window.addEventListener('copy', (e) => {
    e.preventDefault()
})
window.addEventListener('paste', (e) => {
    e.preventDefault()
})