window.addeventlistener监听哪些事件
时间: 2025-04-06 22:14:36 浏览: 78
### Vue 和 JavaScript 中 `window.addEventListener` 的支持事件类型
在前端开发中,`window.addEventListener` 是一种非常重要的机制,用于绑定各种类型的事件到目标对象上。以下是常见的可以被 `addEventListener` 所监听的事件类型:
#### DOM 事件
这些事件通常与 HTML 文档中的交互有关。
- **鼠标事件**: 如点击 (`click`)、双击 (`dblclick`)、按下 (`mousedown`)、释放 (`mouseup`) 等[^2]。
- **键盘事件**: 键盘输入相关的事件,如按键按下 (`keydown`)、按键弹起 (`keyup`) 等。
- **焦点事件**: 聚焦 (`focus`)、失去聚焦 (`blur`) 等。
#### 浏览器窗口事件
涉及整个浏览器窗口的行为。
- **加载/卸载事件**: 页面加载完成 (`load`)、关闭前触发 (`beforeunload`)、完全卸载资源 (`unload`) 等。
- **大小调整事件**: 当用户改变浏览器窗口尺寸时触发 (`resize`)。
- **滚动事件**: 用户滚动页面时触发 (`scroll`)。
#### 媒体查询事件
当媒体查询状态发生变化时触发。
- **匹配变化事件**: 使用 `matchMedia()` API 并通过 `change` 事件监听断点的变化。
#### 设备方向和运动事件
尽管某些设备可能存在问题[^3],理论上仍可监听以下事件:
- **设备方向变更事件**: `deviceorientation` 表示设备的方向发生改变。
- **设备运动事件**: `devicemotion` 提供加速度计数据以检测移动情况。
需要注意的是,在实际应用过程中可能会遇到兼容性问题,尤其是移动端环境下的特殊处理需求[^4]。
#### 替代方案说明
对于像微信小程序这样的特定平台,由于其运行环境不同于标准 Web 浏览器,因此原生 `window.addEventListener` 不一定适用。此时应考虑采用框架提供的专用接口作为解决方案。
```javascript
// 示例代码展示如何正确移除事件监听器
function handleResize(event) {
console.log('Window resized:', event);
}
window.addEventListener('resize', handleResize);
// 后续某处调用此函数停止监听
window.removeEventListener('resize', handleResize);
```
上述代码片段展示了添加以及随后安全地删除一个简单的窗口重设大小事件处理器的方法。
阅读全文
相关推荐


















