在网页开发中，窗口回调函数是一种强大的工具，它可以帮助我们更好地控制网页的行为，提升用户体验。窗口回调函数是当浏览器窗口发生某些事件时，自动执行的函数。这些事件可能包括窗口大小改变、页面加载完成、用户点击等。通过掌握窗口回调函数，我们可以让网页变得更加智能和互动。

窗口回调函数的基础知识

1. 事件监听器

首先，我们需要了解事件监听器。事件监听器是一种可以监听特定事件并执行相应操作的函数。在JavaScript中，我们可以使用addEventListener方法为元素添加事件监听器。

window.addEventListener('resize', function() {
  console.log('窗口大小改变');
});

在上面的代码中，我们为窗口添加了一个resize事件监听器，当窗口大小改变时，会执行匿名函数中的代码。

2. 事件对象

当事件发生时，浏览器会创建一个事件对象，该对象包含了与事件相关的信息。在事件监听器的函数中，我们可以通过参数访问这个事件对象。

window.addEventListener('resize', function(event) {
  console.log('窗口宽度：', event.target.innerWidth);
  console.log('窗口高度：', event.target.innerHeight);
});

在上面的代码中，我们通过event参数访问了事件对象，并获取了窗口的宽度和高度。

常用窗口回调函数

1. load事件

load事件在页面或图像加载完成后触发。我们可以使用这个事件来确保页面上的所有资源都加载完成后再执行某些操作。

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

2. resize事件

resize事件在窗口或框架大小改变时触发。我们可以使用这个事件来动态调整页面布局。

window.addEventListener('resize', function() {
  // 根据窗口大小调整布局
});

3. scroll事件

scroll事件在用户滚动页面时触发。我们可以使用这个事件来监听滚动位置，并执行相应的操作。

window.addEventListener('scroll', function() {
  console.log('当前滚动位置：', window.scrollY);
});

4. unload事件

unload事件在页面即将卸载时触发。我们可以使用这个事件来清理页面资源，例如关闭定时器或取消网络请求。

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

实战案例

以下是一个使用窗口回调函数实现响应式布局的案例：

window.addEventListener('resize', function() {
  var width = window.innerWidth;
  if (width < 600) {
    // 调整布局为移动端
  } else if (width >= 600 && width < 1024) {
    // 调整布局为平板端
  } else {
    // 调整布局为桌面端
  }
});

在这个案例中，我们根据窗口宽度调整页面布局，以适应不同的设备。

通过学习窗口回调函数，我们可以更好地控制网页的行为，提升用户体验。掌握这些技巧，让你的网页更加智能和互动。