深入解析 Window 常见事件、方法、属性，让前端开发更上一层楼！

作为一名前端开发人员，对 window 对象的常见事件、方法和属性的熟练掌握是必不可少的。这些基础知识不仅可以帮助你轻松构建交互式网页，还能让你在复杂的项目中游刃有余。

Window 对象的常见事件

Window 对象提供了许多有用的事件，可以用来响应用户交互或浏览器行为。以下列举了一些常用的事件：

• onload: 当网页加载完成时触发。
• onbeforeunload: 当用户离开网页时触发。
• onunload: 当网页卸载时触发。
• resize: 当浏览器窗口调整大小时触发。
• scroll: 当浏览器窗口滚动时触发。
• focus: 当浏览器窗口获得焦点时触发。
• blur: 当浏览器窗口失去焦点时触发。
• DOMContentLoaded: 当 DOM 加载完成时触发。

Window 对象的常用方法

Window 对象还提供了一些常用的方法，可以用来操控浏览器窗口或获取相关信息。以下列举了一些常用的方法：

• addEventListener: 添加一个事件监听器到 window 对象。
• removeEventListener: 移除一个事件监听器从 window 对象。
• alert: 显示一个警报对话框。
• confirm: 显示一个确认对话框。
• prompt: 显示一个提示对话框。
• open: 打开一个新窗口或选项卡。
• close: 关闭当前窗口或选项卡。
• moveTo: 将窗口移动到指定位置。
• moveBy: 将窗口移动指定距离。
• resizeTo: 将窗口调整到指定大小。
• resizeBy: 将窗口调整指定距离。
• scrollTo: 将窗口滚动到指定位置。
• scrollBy: 将窗口滚动指定距离。
• print: 打印当前网页。
• setInterval: 定期执行指定的函数。
• clearInterval: 清除一个定时器。
• setTimeout: 延迟执行指定的函数。
• clearTimeout: 清除一个延迟函数。

Window 对象的常用属性

Window 对象还提供了一些常用的属性，可以用来获取浏览器窗口或相关信息。以下列举了一些常用的属性：

• location: 当前页面的 URL。
• history: 浏览器历史记录。
• navigator: 浏览器信息。
• screen: 屏幕信息。
• innerWidth: 浏览器窗口的内部宽度。
• innerHeight: 浏览器窗口的内部高度。
• outerWidth: 浏览器窗口的外部宽度。
• outerHeight: 浏览器窗口的外部高度。
• pageXOffset: 浏览器窗口的水平滚动位置。
• pageYOffset: 浏览器窗口的垂直滚动位置。
• scrollX: 浏览器窗口的水平滚动位置。
• scrollY: 浏览器窗口的垂直滚动位置。
• document: 当前网页的文档对象。

结语

通过本文的介绍，相信你已经对 window 对象的常见事件、方法和属性有了更深入的了解。这些知识将在你的前端开发工作中发挥重要作用，帮助你创建出更具交互性和动态性的网页。