JavaScript - 窗口/文档事件

你好，有抱负的程序员们！今天，我们将深入探索JavaScript事件的精彩世界，特别是关注窗口和文档事件。作为你友好的计算机老师邻居，我将用大量的示例和解释来引导你完成这次旅程。所以，拿起你最喜欢的饮料，舒服地坐好，让我们开始吧！

窗口事件

窗口事件是与浏览器窗口本身相关联的动作。这些事件对于创建动态和响应式的Web应用程序非常有用。让我们探索一些最常见的窗口事件：

1. load

load事件在页面及其所有依赖资源（如样式表和图片）完全加载完成后触发。这通常用于确保在运行脚本之前所有元素都可用。

window.addEventListener('load', function() {
console.log("页面已完全加载！");
});

在这个示例中，我们正在向窗口对象添加一个事件监听器。当load事件发生时，我们的函数将运行，向控制台输出一条消息。

2. resize

resize事件在浏览器窗口被调整大小时触发。这对于调整布局或重新计算尺寸非常有用。

window.addEventListener('resize', function() {
console.log("窗口调整到尺寸: " + window.innerWidth + "x" + window.innerHeight);
});

在这里，我们正在记录窗口调整大小时的新尺寸。这对于响应式设计调整可能很有用。

3. scroll

scroll事件在用户在窗口中滚动时触发。这可以用于实现无限滚动或根据滚动位置显示/隐藏元素。

window.addEventListener('scroll', function() {
let scrollPosition = window.scrollY;
console.log("滚动到位置: " + scrollPosition);

if (scrollPosition > 300) {
document.getElementById('backToTop').style.display = 'block';
} else {
document.getElementById('backToTop').style.display = 'none';
}
});

在这个示例中，当用户向下滚动超过300像素时，我们将显示一个“回到顶部”的按钮。

4. unload

unload事件在用户离开页面时触发。这可以用于执行清理任务或在离开前提示用户。

window.addEventListener('unload', function(event) {
event.preventDefault();
event.returnValue = '';
});

此代码将在用户尝试离开页面时显示一个确认对话框。记住要谨慎使用此功能，因为它可能会让用户感到烦恼！

文档事件

文档事件与HTML文档本身相关。这些事件允许我们以各种方式与页面内容交互。让我们看看一些关键的文档事件：

1. DOMContentLoaded

DOMContentLoaded事件在初始HTML文档完全加载和解析后触发，而不等待外部资源加载完成。

document.addEventListener('DOMContentLoaded', function() {
console.log("DOM已就绪！");
document.getElementById('myButton').addEventListener('click', function() {
alert("按钮被点击！");
});
});

此事件通常比window.load更受欢迎，因为它不会等待图片和其他资源加载完成，从而允许更快地执行脚本。

2. click

click事件在元素被点击时触发。这是你最常使用的事件之一。

document.getElementById('myButton').addEventListener('click', function(event) {
console.log("按钮在坐标处被点击: " + event.clientX + ", " + event.clientY);
event.target.style.backgroundColor = 'red';
});

在这个示例中，我们记录了点击的坐标并更改按钮被点击时的颜色。

3. keydown 和 keyup

这些事件在按键被按下（keydown）或释放（keyup）时触发。

document.addEventListener('keydown', function(event) {
console.log("按键被按下: " + event.key);
if (event.key === 'Enter') {
document.getElementById('submitButton').click();
}
});

此代码记录了每次按键，并在按下Enter键时模拟点击提交按钮。

4. mouseover 和 mouseout

这些事件在鼠标指针进入（mouseover）或离开（mouseout）元素时触发。

let hoverElement = document.getElementById('hoverMe');

hoverElement.addEventListener('mouseover', function() {
this.style.backgroundColor = 'yellow';
});

hoverElement.addEventListener('mouseout', function() {
this.style.backgroundColor = '';
});

这创建了一个简单的悬停效果，当鼠标悬停在元素上时更改背景颜色。

事件方法表

以下是我们讨论过的方法的便捷表格：

事件	描述	示例
load	页面完全加载时触发	window.addEventListener('load', function() {...})
resize	窗口调整大小时触发	window.addEventListener('resize', function() {...})
scroll	窗口滚动时触发	window.addEventListener('scroll', function() {...})
unload	导航离开页面时触发	window.addEventListener('unload', function(event) {...})
DOMContentLoaded	DOM就绪时触发	document.addEventListener('DOMContentLoaded', function() {...})
click	元素被点击时触发	element.addEventListener('click', function(event) {...})
keydown	按键被按下时触发	document.addEventListener('keydown', function(event) {...})
keyup	按键被释放时触发	document.addEventListener('keyup', function(event) {...})
mouseover	鼠标进入元素时触发	element.addEventListener('mouseover', function() {...})
mouseout	鼠标离开元素时触发	element.addEventListener('mouseout', function() {...})

就这样，伙计们！我们已经涵盖了JavaScript中窗口和文档事件的基础。记住，熟能生巧，所以不要害怕在你自己的项目中尝试这些事件。在你意识到之前，你将能够像专业人士一样创建交互性和动态性强的网页！

快乐编码，愿你的事件总是如预期般触发！

Credits: Image by storyset