📅  最后修改于: 2023-12-03 15:01:10.419000             🧑  作者: Mango
HTML DOM 窗口事件属性是指在窗口中发生的各种事件的属性。这些事件可以是文档加载、窗口大小改变、窗口滚动等。
window.onload
事件会在文档和其所有子资源(如图像)完成加载后立即发生。这一事件通常用于初始化页面中的数据和对象等。下面是一个例子:
<script>
window.onload = function() {
alert("页面加载完成!");
};
</script>
window.onresize
事件会在窗口大小改变时发生。该事件通常用于重新计算文档中元素的大小和位置。下面是一个例子:
<script>
window.onresize = function() {
document.getElementById("myDiv").innerHTML = "当前窗口大小为:" + window.innerWidth + " x " + window.innerHeight;
};
</script>
<div id="myDiv"></div>
window.onscroll
事件会在窗口滚动时发生。该事件通常用于实现一些滚动效果,如固定导航栏等。下面是一个例子:
<style>
.nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #333;
color: #fff;
padding: 10px 0;
text-align: center;
}
</style>
<script>
window.onscroll = function() {
var nav = document.getElementById("nav");
if (window.pageYOffset >= 100) {
nav.style.display = "block";
} else {
nav.style.display = "none";
}
};
</script>
<div id="nav" class="nav" style="display: none;">导航栏</div>
<div style="height: 1000px;"></div>
window.onunload
事件会在文档或窗口被卸载或关闭时发生。该事件通常用于清理一些资源或保存用户的数据等。下面是一个例子:
<script>
window.onunload = function() {
localStorage.setItem("username", document.getElementById("username").value);
localStorage.setItem("password", document.getElementById("password").value);
};
window.onload = function() {
var username = localStorage.getItem("username");
var password = localStorage.getItem("password");
if (username && password) {
document.getElementById("username").value = username;
document.getElementById("password").value = password;
}
};
</script>
<input type="text" id="username">
<input type="password" id="password">
以上就是 HTML DOM 窗口事件属性的介绍。通过使用这些事件,我们可以更好地控制页面的行为和响应用户的操作。