JavaScript - Window/Document 事件
JavaScript Window 窗口事件是指用户执行影响整个浏览器窗口的操作(例如加载、调整大小、关闭或移动窗口)。最常见的窗口事件是通过打开特定网页来加载窗口。此事件由 onload 事件处理程序处理。
开发者可以使用 JavaScript 创建响应用户操作的动态交互式网页。交互性取决于两个核心方面:窗口事件和文档事件。窗口事件在浏览器的全景级别运行，赋予对浏览器窗口整体状态的控制权;而文档事件则与 HTML 文档交互，使开发者能够针对页面中的元素或操作做出特定反应。
Window 窗口事件
在浏览器级别，窗口事件发生并与窗口对象关联;这个全局对象代表 Web 浏览器的窗口。这些类型的事件经常用于监控浏览器窗口的整体状态或管理全局交互。
| 事件名称 | 描述 |
|---|---|
| load | 当整个网页(包括其所有资源)加载完成时触发。 |
| unload | 当用户离开页面或关闭浏览器窗口或标签页时触发。 |
| resize | 当浏览器窗口大小改变时触发。 |
| scroll | 当用户滚动页面。 |
示例:演示窗口事件
在此示例中，脚本主动监听窗口上的"加载"、"调整大小"和"滚动"事件;它包含一个初始页面加载警报，告知用户加载已完成。如果用户随后调整窗口大小，则会触发警报，从而显示更新后的视口的新尺寸。此外，当用户滚动页面时，也会触发警报以指示其操作。
<!DOCTYPE html>
<html>
<head>
<title>Window Events Example</title>
<style>
body {
height: 2000px; /* Adding some content just to enable scrolling */
}
#resizeInfo {
position: fixed;
top: 10px;
left: 10px;
background-color: #fff;
padding: 10px;
border: 1px solid #ccc;
}
</style>
<script>
window.addEventListener('load', function() {
var initialSizeInfo = 'Initial window size: ' + window.innerWidth + ' x ' + window.innerHeight;
document.getElementById('resizeInfo').innerText = initialSizeInfo;
alert('The page has finished loading!');
});
window.addEventListener('resize', function() {
var newSizeInfo = 'New window size: ' + window.innerWidth + ' x ' + window.innerHeight;
document.getElementById('resizeInfo').innerText = newSizeInfo;
alert("Page has been resized");
});
window.addEventListener('scroll', function() {
alert('You have scrolled on this page.');
},{once:true});
</script>
</head>
<body>
<div id="resizeInfo">Initial window size: ${window.innerWidth} x ${window.innerHeight}</div>
</body>
</html>
Document 文档事件
另一方面，文档事件发生在窗口内的 HTML 文档级别，并与代表 HTML 文档的 document 对象相关联，从而提供与页面内容交互的接口。
| 事件名称 | 描述 |
|---|---|
| DOMContentLoaded | 当 HTML 文档完全加载并解析时触发，无需等待图像等外部资源。 |
| click | 当用户点击元素时触发。 |
| submit | 当表单提交时触发已提交。 |
| keydown/keyup/keypress | 这些事件分别在按下、释放或两者同时发生时触发。 |
| change | 当输入元素的值发生变化时触发，例如文本输入或下拉菜单。 |
示例:演示文档事件
在此示例中，我们包含一个脚本，用于监听文档上的"DOMContentLoaded"、"click"、"submit"和"keydown"事件。"DOMContentLoaded"事件发生后，它会将 DOM 内容已完全加载的消息记录到控制台。随后，点击某个元素会触发一个警告框，显示被点击元素的标签名称。提交表单也会警告表单已提交。此外，按下一个键(例如输入带有字符的用户名)时，每次按键都会在屏幕上发出警报。
<!DOCTYPE html>
<html>
<head>
<title>Document Events Example</title>
<script>
document.addEventListener('DOMContentLoaded', function() {
alert('DOM content has been fully loaded!');
});
document.addEventListener('click', function(event) {
alert('Element clicked! Tag Name: ' + event.target.tagName);
},{once:true});
document.addEventListener('submit', function() {
alert('Form submitted!');
});
document.addEventListener('keydown', function(event) {
alert('Key pressed: ' + event.key);
},{once:true});
</script>
</head>
<body>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<button type="submit">Submit</button>
</form>
</body>
</html>
