JavaScript 中的窗口大小调整事件
本教程将讨论使用 JavaScript 中的 addEventListener() 和 onresize() 函数添加调整大小事件。
使用 JavaScript 中的 addEventListener() 函数添加调整大小事件
要向窗口添加调整大小事件，我们可以使用 JavaScript 中的 addEventListener() 函数。此函数向对象添加包含函数的事件。例如，让我们向对象窗口添加一个事件以获取其宽度和高度并将其显示在网页上。请参考下面的代码。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<span>Width = </span><span id="SpanID1"></span>
<br />
<span>Height = </span><span id="SpanID2"></span>
<script type="text/javascript">
start();
window.addEventListener('resize', start);
function start(){
document.getElementById('SpanID1').innerText = document.documentElement.clientWidth;
document.getElementById('SpanID2').innerText = document.documentElement.clientHeight;
}
</script>
</body>
</html>
输出：
Width = 798
Height = 779
在上面的代码中，我们添加了一个带有文本 Width= 的 span，然后，我们在 body 部分添加了一个 id 为 SpanID1 的空 span。我们添加了一个 br 标签来将光标移动到一个新行，在新行上，我们添加了另一个带有文本 Height= 的 span，之后，我们添加了另一个 id 为 SpanID2 的空 span。
跨度的 id 将用于获取 JavaScript 中的元素。在脚本标签中，我们有一个函数 start()，用于改变两个 span 的文本与窗口的宽度和高度。在 start() 函数之后，我们添加了 resize 事件，当用户调整窗口大小时，它将调用 start() 函数。窗口的宽度和高度会显示在页面上，并且会随着窗口大小的变化而变化。你可以将上述代码保存到 HTML 文件中，然后使用任何浏览器打开它并更改其大小以查看代码是否有效。你还可以使用 addEventListener() 函数将事件添加到任何对象，例如复选框。
使用 JavaScript 中的 onresize() 函数添加调整大小事件
要向窗口添加调整大小事件，我们可以使用 JavaScript 中的 onresize() 函数。此函数用于指定更改窗口大小时会发生什么。例如，让我们向对象窗口添加一个事件以获取其宽度和高度并将其显示在网页上。请参考下面的代码。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<span>Width = </span><span id="SpanID1"></span>
<br />
<span>Height = </span><span id="SpanID2"></span>
<script type="text/javascript">
start();
window.onresize = start;
function start(){
document.getElementById('SpanID1').innerText = document.documentElement.clientWidth;
document.getElementById('SpanID2').innerText = document.documentElement.clientHeight;
}
</script>
</body>
</html>
输出：
Width = 798
Height = 779
在上面的代码中，如果窗口的大小正在改变，start() 函数将被调用。如你所见，输出与上述方法相同。
