JavaScript 探究window.onresize

1. 什么是window.onresize？

window.onresize 是 JavaScript 对象 window 上的一个事件，它在窗口大小发生改变时触发。当用户调整浏览器窗口大小、旋转设备方向等导致窗口尺寸改变时，该事件会被触发。

2. 如何使用window.onresize事件？

要使用window.onresize事件，我们可以通过两种方式来绑定事件处理函数：传统的HTML属性方式和JavaScript代码方式。

2.1 HTML 属性方式

在 HTML 元素上，我们可以使用 onresize 属性绑定一个 JavaScript 函数来处理 window.onresize 事件：

<!DOCTYPE html>
<html>
<head>
<!-- 省略其他代码 -->
</head>
<body onresize="resizeHandler()">
<script>
function resizeHandler() {
  console.log('窗口大小已改变');
}
</script>
</body>
</html>

在上述示例中，当窗口大小改变时，会触发名为 resizeHandler 的 JavaScript 函数，函数内的代码会打印出一条消息到浏览器的控制台。

2.2 JavaScript 代码方式

除了在 HTML 元素上使用 onresize 属性，我们还可以通过 JavaScript 代码动态地绑定事件处理函数。在 JavaScript 中，我们可以使用 addEventListener 方法来实现：

<!DOCTYPE html>
<html>
<head>
<!-- 省略其他代码 -->
</head>
<body>
<script>
window.addEventListener('resize', function() {
  console.log('窗口大小已改变');
});
</script>
</body>
</html>

与使用 onresize 属性方式相比，通过 addEventListener 方法可以更灵活地添加和移除事件处理函数。

3. window.onresize事件的应用场景

window.onresize 事件被广泛应用于需要根据窗口大小变化做出相应调整的场景。下面我们将介绍几个常见的应用场景。

3.1 响应式布局

响应式布局是一种灵活的网页设计方法，可以使网页的布局在不同设备上自适应，以便提供更好的用户体验。通过监听 window.onresize 事件，我们可以根据窗口大小的改变来调整页面布局。

<!DOCTYPE html>
<html>
<head>
<style>
.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  box-sizing: border-box;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
</style>
</head>
<body>
<div class="clearfix">
  <div class="column" style="background-color:#aaa;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#ccc;">
    <h2>Column 3</h2>
    <p>Some text..</p>
  </div>
</div>
<script>
window.addEventListener('resize', function() {
  var columns = document.getElementsByClassName('column');
  for (var i = 0; i < columns.length; i++) {
    columns[i].style.width = (100 / columns.length) + '%';
  }
});
</script>
</body>
</html>

在上述示例中，我们定义了三个等宽的列，并在 window.onresize 事件发生时重新计算每列的宽度，从而实现响应式布局。

3.2 元素位置调整

在一些网页应用中，我们可能需要根据窗口大小调整元素的位置，以适应不同设备上的显示效果。通过监听 window.onresize 事件，我们可以在窗口大小变化时重新计算元素的位置。

<!DOCTYPE html>
<html>
<head>
<style>
#element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div id="element">
  <h2>Centered Element</h2>
  <p>This element is always centered in the viewport.</p>
</div>
<script>
window.addEventListener('resize', function() {
  var element = document.getElementById('element');
  var windowWidth = window.innerWidth;
  var windowHeight = window.innerHeight;
  element.style.left = (windowWidth / 2) + 'px';
  element.style.top = (windowHeight / 2) + 'px';
});
</script>
</body>
</html>

在上述示例中，我们将一个元素居中显示，并在 window.onresize 事件触发时重新计算它的位置，使其始终保持居中。

3.3 响应式图片

在响应式网页设计中，图片也需要根据窗口大小的变化来适应不同设备的显示。通过监听 window.onresize 事件，我们可以根据窗口大小调整图片的大小。

<!DOCTYPE html>
<html>
<head>
<style>
img {
  max-width: 100%;
  height: auto;
}
</style>
</head>
<body>
<img id="image" src="example.jpg">
<script>
window.addEventListener('resize', function() {
  var image = document.getElementById('image');
  var windowWidth = window.innerWidth;
  image.style.maxWidth = windowWidth + 'px';
});
</script>
</body>
</html>

在上述示例中，当窗口大小改变时，我们通过将图片的 max-width 属性设置为窗口宽度，来实现响应式图片。