JavaScript 中的窗口（window）和文档（document）事件允许开发者监听浏览器窗口或HTML文档的各种状态变化和用户交互行为。以下是一些常用的窗口和文档事件：

窗口（Window）事件

1. load: 当整个页面（包括图像、脚本等所有资源）加载完毕后触发。

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

2. unload: 在窗口卸载页面之前触发，可以用于清理一些资源，如定时器。

   window.addEventListener('unload', function() {
       console.log('页面即将卸载！');
   });

3. beforeunload: 在页面即将被卸载前触发，可以提示用户确认是否离开页面。

   window.addEventListener('beforeunload', function(event) {
       event.preventDefault(); // 阻止默认行为
       event.returnValue = "确定要离开吗？"; // 浏览器会显示此消息
   });

4. resize: 当窗口尺寸发生改变时触发。

   window.addEventListener('resize', function() {
       console.log('窗口大小发生了改变！');
   });

5. scroll: 当文档视口发生滚动时触发。

   window.addEventListener('scroll', function() {
       console.log('页面正在滚动！');
   });

文档（Document）事件

1. DOMContentLoaded: 当初始的HTML文档被完全加载和解析完成之后，DOM树构建完成，但并不等待样式表、图片和子框架完成加载就会触发。

   document.addEventListener('DOMContentLoaded', function() {
       console.log('DOM树构建完成，可以操作DOM了！');
   });

2. click: 当用户点击文档中的元素时触发。

   document.addEventListener('click', function(event) {
       console.log('文档中的元素被点击了！');
   });

3. mousemove: 当鼠标指针在文档中移动时触发。

   document.addEventListener('mousemove', function(event) {
       console.log('鼠标位置：', event.clientX, event.clientY);
   });

4. keydown/keyup: 分别在用户按下或释放键盘上的键时触发。

   document.addEventListener('keydown', function(event) {
       console.log('按键被按下：', event.key);
   });
   
   document.addEventListener('keyup', function(event) {
       console.log('按键被释放：', event.key);
   });

通过监听这些事件，开发者能够实现页面的动态交互、响应用户的操作以及优化用户体验。



真诚赞赏，手留余香

微信支付