JavaScript - 窗口/文档事件

上一页
下一页

JavaScript 窗口事件是当用户执行影响整个浏览器窗口的操作（如加载、调整大小、关闭或移动窗口）时发生的操作。最常见的 window 事件是通过打开特定网页来加载窗口。此事件由 onload 事件处理程序处理。

开发人员可以使用 JavaScript 创建响应用户操作的动态交互式网页。交互性取决于两个核心方面：窗口事件和文档事件。在浏览器的全景级别运行，窗口事件赋予对浏览器窗口整体状态的控制权;或者，文档事件与 HTML 文档交互，使开发人员能够对页面中的元素或操作做出特定反应

窗口事件

在浏览器级别，窗口事件发生并与 window 对象保持关联;此全局对象表示 Web 浏览器的窗口。这些类型的事件经常用于监督浏览器窗口的整体状态或管理全局交互。

事件名称 描述
load 当整个网页（包括其所有资源）完成加载时触发。
unload 当用户离开页面或关闭浏览器窗口或选项卡时触发。
resize 更改浏览器窗口的大小时激活。
scroll 当用户滚动页面时触发。

示例：演示窗口事件

在此示例中，脚本主动侦听窗口上的 'load'、'resize' 和 'scroll' 事件;它包括一个初始页面加载警报，以通知用户加载已完成。如果他们随后调整窗口大小，将触发警报，从而显示其更新的视区的新大小。此外，当用户在页面上滚动时，会触发警报以指示他们的操作。


<!DOCTYPE html>
<html>
<head>
	 	<title>Window Events Example</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 = '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>

文档事件

另一方面，文档事件发生在窗口内的 HTML 文档级别，并与表示 HTML 文档的 document 对象相关联，从而提供与页面内容交互的接口。

事件名称 描述
DOMContentLoaded 当 HTML 文档已完全加载和解析，无需等待图像等外部资源时触发。
click 当用户单击元素时触发。
submit 在提交表单时触发。
keydown/keyup/keypress 这些事件分别在按下和/或释放一个键时触发。
change 当 input 元素的值发生更改时触发，例如使用文本输入或下拉列表。

示例：演示文档事件

在此示例中，我们包含一个脚本，用于侦听文档上的“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>
打印本页
上一页
下一页