window的事件

在 JavaScript 中，window 对象代表浏览器的窗口，而 window 上的各种事件可以用于响应用户的交互或者浏览器的状态变化。例如，window 上有很多内置的事件，比如页面加载、窗口尺寸变化、滚动、键盘输入等。

下面是一些常见的 window 事件及其使用方式：

1. load 事件：页面加载完成时触发

load 事件会在所有页面内容（包括图片、脚本、样式等）加载完成时触发。通常用于确保页面完全加载后执行某些操作。

window.addEventListener('load', function() {
  console.log('页面完全加载完成');
});

2. resize 事件：窗口大小变化时触发

当浏览器窗口的大小发生变化时，resize 事件会被触发。常用于响应式布局中，根据窗口大小调整页面内容。

window.addEventListener('resize', function() {
  console.log('窗口大小发生了变化');
});

3. scroll 事件：窗口滚动时触发

scroll 事件在页面或元素的滚动条发生滚动时触发。可以用来监听页面的滚动位置，并实现一些滚动效果或懒加载功能。

window.addEventListener('scroll', function() {
  console.log('页面发生了滚动');
});

4. focus 事件：窗口获取焦点时触发

focus 事件在窗口被激活（获得焦点）时触发。可以用来检测用户是否重新切换到当前浏览器窗口。

window.addEventListener('focus', function() {
  console.log('窗口获取了焦点');
});

5. blur 事件：窗口失去焦点时触发

blur 事件会在窗口失去焦点时触发。例如，当用户切换到其他浏览器标签时触发。

window.addEventListener('blur', function() {
  console.log('窗口失去了焦点');
});

6. beforeunload 事件：页面卸载前触发

beforeunload 事件会在用户尝试离开页面或关闭浏览器窗口时触发。它可以用来给用户提供确认离开的提示。

window.addEventListener('beforeunload', function(event) {
  event.preventDefault();  // 有些浏览器要求调用 preventDefault()
  event.returnValue = '';   // 设置返回值
  console.log('即将离开页面');
});

7. unload 事件：页面卸载时触发

unload 事件在页面卸载时触发，通常用于清理资源或者记录离开页面的数据。不过，现代浏览器对 unload 事件的支持已经越来越弱，因此更推荐使用 beforeunload 事件。

window.addEventListener('unload', function() {
  console.log('页面即将被卸载');
});

8. error 事件：窗口或资源加载错误时触发

error 事件可以用于监听 JavaScript 错误、图片加载错误等。它常用于错误日志的捕捉和处理。

window.addEventListener('error', function(event) {
  console.log('发生了错误:', event.message);
});

9. storage 事件：本地存储发生变化时触发

storage 事件在浏览器的 localStorage 或 sessionStorage 数据发生变化时触发。通常用于多个标签页之间的同步。

window.addEventListener('storage', function(event) {
  console.log('本地存储发生了变化:', event.key, event.newValue);
});

10. pointer 事件（pointerdown、pointermove、pointerup 等）

pointer 事件是一个新的事件模型，用于捕捉触摸、鼠标和其他指针设备的事件。可以用来替代传统的 mouse 事件（如 mousedown、mousemove、mouseup）和 touch 事件（如 touchstart、touchmove、touchend）。

window.addEventListener('pointerdown', function(event) {
  console.log('指针按下', event);
});

window.addEventListener('pointermove', function(event) {
  console.log('指针移动', event);
});

window.addEventListener('pointerup', function(event) {
  console.log('指针抬起', event);
});

总结：

window 对象有很多内建事件，适用于监听页面和浏览器窗口的各种状态变化。
常见的事件包括 load、resize、scroll、focus、blur、beforeunload、unload、error、storage 等。
可以使用 addEventListener 方法为这些事件注册回调函数，实时响应用户的行为或浏览器的状态变化。

通过这些事件，你可以更灵活地控制浏览器窗口的行为以及用户与页面的互动。