一篇文章搞定JavaScript Windows事件

1. 概念

JavaScript中的窗口事件是与整个浏览器窗口相关联的事件，它们允许开发人员捕获和响应与整个浏览器窗口的行为和状态变化。这些事件可以用于实现各种交互、动画和页面控制逻辑。

2. 方法原理

1. 事件监听器: 通过addEventListener方法可以附加窗口事件监听器，以便在特定事件发生时执行指定的处理程序。
2. 处理程序函数: 当事件被触发时，与之关联的处理程序函数将会被调用执行。

//常用格式
window.addEventListener('事件名',fuction(){
//具体功能
});

3.常用事件名

• load：当页面和所有相关资源加载完成时触发。
• unload：当文档或一个子资源正在被卸载时（例如用户导航到其他页面）触发。
• resize：当窗口或框架的大小变化时触发。
• scroll：当用户滚动页面时触发。
• focus：当窗口获得焦点时触发。
• blur：当窗口失去焦点时触发。

4. 使用

4.1 页面加载完成事件

window.addEventListener('load',function(){
  //页面加载完成后执行的操作
  console.log('页面加载完成');
  });

当整个文档和所有相关资源都加载完成后，load事件将被触发，执行指定的处理程序。

4.2 窗口大小改变事件

window.addEventListener('resize', function() {
  // 窗口大小改变时执行的操作
  console.log('窗口大小发生改变');
});

当用户调整浏览器窗口大小时，resize事件将被触发，执行相应的处理逻辑。

4.3 页面滚动事件

window.addEventListener('scroll', function() {
  // 用户滚动页面时执行的操作
  console.log('用户正在滚动页面');
});

通过监听scroll事件，可以在用户滚动页面时执行特定操作，如懒加载等。
这些实例展示了窗口事件的使用方式，用于捕获和响应与整个浏览器窗口相关的行为和状态变化。通过这些事件，开发人员可以实现更加丰富和交互性的网页应用。