UI 和焦点事件

UI 事件

事件	说明
`load`	在 window 上当页面加载完成后触发，包括所有外部资源（图片、JavaScript脚本、css脚本）在窗套（frameset）上当多有窗格（frame）都加载完成后触发在 img 元素上当图片加载完成后触发在 object 元素上当相应对象加载完成后触发
`unload`	在文档卸载完成后触发从页面导航到另一个页面时触发
`resize`	当浏览器窗口被缩放到新高度或宽度时触发浏览器窗口最大化和最小化时触发
`scroll`	滚动时触发

JavaScript 方式

window.addEventListener('load', event => {})

向 body 元素添加 onload 属性

html

<body onload="console.log('loaded!')"></body>

图片不一定要把 img 元素添加到文档，只要给它设置了 src 属性就会立即开始下载

const image = new Image()
image.addEventListener('load', event => {
    console.log('image loaded!')
})
image.src = 'smile.jpg'

当焦点从页面中的一个元素移动到另一个元素上
focusout 在失去焦点的元素上触发
focusin 在获得焦点的元素上触发
blur 在失去焦点的元素上触发
focus 在获得焦点的元素上触发