HTML DOM 窗口事件属性

HTML DOM 窗口事件属性是指在窗口中发生的各种事件的属性。这些事件可以是文档加载、窗口大小改变、窗口滚动等。

window.onload

window.onload 事件会在文档和其所有子资源（如图像）完成加载后立即发生。这一事件通常用于初始化页面中的数据和对象等。下面是一个例子：

<script>
window.onload = function() {
  alert("页面加载完成！");
};
</script>

window.onresize

window.onresize 事件会在窗口大小改变时发生。该事件通常用于重新计算文档中元素的大小和位置。下面是一个例子：

<script>
window.onresize = function() {
  document.getElementById("myDiv").innerHTML = "当前窗口大小为：" + window.innerWidth + " x " + window.innerHeight;
};
</script>
<div id="myDiv"></div>

window.onscroll

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

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 窗口事件属性的介绍。通过使用这些事件，我们可以更好地控制页面的行为和响应用户的操作。