window事件（窗口事件）- JavaScript事件处理
window（窗口）事件是指当用户与页面上的元素交互时所触发的事件。
1、加载事件（load）
当整个页面（包括所有框架、样式表、图像等资源）完全加载完成时触发。常用于在文档加载完成后执行脚本，确保DOM结构完整可用。
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>load加载事件</title>
</head>
<body onload="console.log('onload->1 整个页面已完成加载。')">
<script>
window.onload = function () {
console.log('onload->2 整个页面已完成加载。');
};
window.addEventListener('load', function () {
console.log('load->1 整个页面已完成加载。');
});
window.addEventListener('load', function () {
console.log('load->2 整个页面已完成加载。');
});
function ImageLoad(){
myimg=document.getElementById("img1");
myimg.style.border="5px solid #007799";
myimg.style.width="90%";
alert("图片加载完成后，给该图片加边框");
}
</script>
<img id="img1" src="https://www.ytwes.com/zb_users/theme/tpure/style/images/banner.jpg" onload="ImageLoad()">
</body>
</html>onload 是一个属性，只有最后一个生效。
addEventListener是方法，会按照添加顺序依次执行。
如果您需要确保仅在特定图片加载完成时执行操作，应继续使用 img 元素的 onload 属性，而不是window.addEventListener
2、尺寸改变事件（resize）
当浏览器窗口尺寸发生变化（如用户调整窗口大小或设备旋转）时触发。用于响应式布局调整、动态调整元素大小等。
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>resize事件</title>
<script>
function WindowChange() {
const w = window.outerWidth;
const h = window.outerHeight;
const txt = "窗口大小: 宽度=" + w + ", 高度=" + h;
document.getElementById("demo").innerHTML = txt;
};
</script>
</head>
<body onresize="WindowChange()">
<script>
window.onresize = function () {
console.log('onresize->2 窗口大小已更改。');
};
window.addEventListener('resize', function () {
console.log('addEventListener->1 窗口大小已更改。');
});
window.addEventListener('resize', function () {
console.log('addEventListener->2 窗口大小已更改。');
});
</script>
<p>调整浏览器的窗口</p>
<p id="demo"> </p>
<p>请拖动浏览器边框</p>
</body>
</html>onresize是一个属性，只有最后一个生效。
addEventListener是方法，会按照添加顺序依次执行。
3、滚动事件（scroll）
当用户滚动浏览器窗口时触发。可用于实现滚动监听功能，如 粘性导航栏、无限滚动加载、滚动指示器等。
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>scroll事件</title>
<style>
body {height: 2000px;}
#demo {position: fixed;}
</style>
<script>
function myFunction() {
const top = window.scrollY;
const txt = "当前窗口的垂直滚动位置: " + top;
document.getElementById("demo").innerHTML = txt;
console.log('onscroll->1 用户正在滚动窗口。');
};
</script>
</head>
<body onscroll="myFunction()">
<script>
window.onscroll = function () {
console.log('onscroll->2 用户正在滚动窗口。');
};
window.addEventListener('scroll', function () {
console.log('addEventListener->1 用户正在滚动窗口。');
});
window.addEventListener('scroll', function () {
console.log('addEventListener->2 用户正在滚动窗口。');
});
</script>
<p id="demo"> 当前窗口的垂直滚动位置: 0</p>
</body>
</html>4、焦点事件（focus 和 blur）
当窗口获得焦点或失去焦点时触发。
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Focus 和 Blur 事件</title>
<link rel="stylesheet" href="https://www.ytwes.com/assets/css/case.min.css">
</head>
<body>
<h1>Focus 和 Blur 事件演示</h1>
<p>请尝试切换焦点到其他应用程序或标签页，再回到此页面，观察下方事件记录。</p>
<div class="event-log"></div>
<script>
const eventLog = document.querySelector('.event-log');
function logEvent(message) {
const entry = document.createElement('div');
entry.textContent = message;
eventLog.appendChild(entry);
eventLog.scrollTop = eventLog.scrollHeight;
}
window.addEventListener('focus', function () {
logEvent('窗口在获得焦点： ' + new Date().toLocaleTimeString());
});
window.addEventListener('blur', function () {
logEvent('窗口失去焦点： ' + new Date().toLocaleTimeString());
});
</script>
</body>
</html>文档如有描述不清楚、错误或者过时的地方，欢迎留言指出。
文档、教程内容会不定时更新，转载请标明原帖链接，以免让过时的教程流入网络。