2021-09-09 C1任务-36：窗口事件

任务背景

窗口事件在浏览器窗口发生变化时触发，其中包括窗口大小更改，加载窗口，关闭窗口，窗口滚动等，掌握如何处理窗口事件可以帮助我们实现更加丰富的交互效果。

任务目标

掌握常用的窗口事

任务训练

常用鼠标事件

表1：常用窗口事件汇总

load事件代码示例

此处JS代码在元素之前，所以应该将代码放在load事件中，等待元素加载完成后再获取其内容
使用onload绑定事件时，注意一个页面不要存在多个onload，这样会只会运行最后一个onload中的代码，推荐使用addEventListener绑定事件

beforeunload事件代码示例

resize事件代码示例

多用于检测不同屏幕尺寸，自适应布局

scroll事件代码示例

常用于检测滚动条滚动距离

练习

1.最后输出的num数字大小是多少？

add方法中，只有获取到box节点时才会对num加1
box节点在JS代码下方，只有在load事件中的add方法才能获取到box节点，所以num只加了1次，结果为1