JavaScript 的窗口事件是指当用户执行影响整个浏览器窗口的操作时发生的动作，比如加载、调整大小、关闭或移动窗口。最常见的窗口事件就是通过打开特定网页来加载窗口。此事件由 onload 事件处理器处理。
开发者可以使用 JavaScript 创建动态、互动的网页，使其能响应用户的行为。这种互动性依赖于两个核心方面：窗口事件和文档事件。在浏览器的整体级别上，窗口事件赋予了对浏览器窗口整体状态的控制；而文档事件则与 HTML 文档交互，使开发者能够针对页面内的元素或动作作出具体反应。
窗口事件
在浏览器级别上，窗口事件与窗口对象相关联；这个全局对象代表了浏览器的窗口。这些类型的事件经常被用来管理浏览器窗口的整体状态或全局交互。
| 事件名称 |
描述 |
load |
当整个网页及其所有资源完成加载时触发。 |
unload |
当用户离开页面或关闭浏览器窗口或标签页时触发。 |
resize |
当浏览器窗口的尺寸发生变化时激活。 |
scroll |
当用户滚动页面时触发。 |
示例：演示窗口事件
在本示例中，脚本积极监听窗口上的 load、resize 和 scroll 事件；它包括了一个初始页面加载的提示，以告知用户加载已完成。如果用户随后调整窗口大小，将会触发一个提示，显示其更新后的视窗的新大小。此外，当用户滚动页面时，也会触发一个提示，表明他们的动作。
<!DOCTYPE html>
<html>
<head>
<title>窗口事件示例</title>
<style>
body {
height: 2000px;
}
#resizeInfo {
position: fixed;
top: 10px;
left: 10px;
background-color: #fff;
padding: 10px;
border: 1px solid #ccc;
}
</style>
<script>
window.addEventListener('load', function() {
var initialSizeInfo = '初始窗口尺寸: ' + window.innerWidth + ' x ' + window.innerHeight;
document.getElementById('resizeInfo').innerText = initialSizeInfo;
alert('页面已加载完毕！');
});
window.addEventListener('resize', function() {
var newSizeInfo = '新窗口尺寸: ' + window.innerWidth + ' x ' + window.innerHeight;
document.getElementById('resizeInfo').innerText = newSizeInfo;
alert("页面已被调整大小");
});
window.addEventListener('scroll', function() {
alert('您已经滚动了此页面。');
},{once:true});
</script>
</head>
<body>
<div id="resizeInfo">初始窗口尺寸: ${window.innerWidth} x ${window.innerHeight}</div>
</body>
</html>
文档事件
另一方面，文档事件发生在窗口内的 HTML 文档级别，并与表示 HTML 文档的文档对象相关联，从而提供了与页面内容交互的接口。
| 事件名称 |
描述 |
DOMContentLoaded |
当 HTML 文档被完全加载和解析时触发，无需等待外部资源如图片加载完成。 |
click |
当用户点击某个元素时触发。 |
submit |
当表单被提交时触发。 |
keydown/keyup/keypress |
分别在键被按下、释放或两者都发生时触发。 |
change |
当输入元素的值发生变化时触发，如文本输入框或下拉菜单。 |
示例：演示文档事件
在本示例中，我们包含了一个监听 DOMContentLoaded、click、submit 和 keydown 事件的脚本。当 DOMContentLoaded 事件发生时，它记录控制台信息，表明 DOM 内容已完全加载。随后，点击某个元素会触发一个提示，显示被点击元素的标签名。提交表单也会提示表单已提交。此外，像输入用户名时按下键，会将每次按键的动作提示到屏幕上。
<!DOCTYPE html>
<html>
<head>
<title>文档事件示例</title>
<script>
document.addEventListener('DOMContentLoaded', function() {
alert('DOM 内容已完全加载！');
});
document.addEventListener('click', function(event) {
alert('元素被点击！标签名: ' + event.target.tagName);
},{once:true});
document.addEventListener('submit', function() {
alert('表单已提交！');
});
document.addEventListener('keydown', function(event) {
alert('键被按下: ' + event.key);
},{once:true});
</script>
</head>
<body>
<form>
<label for="username">用户名:</label>
<input type="text" id="username" name="username">
<button type="submit">提交</button>
</form>
</body>
</html>