window.addEventListener有哪些监听事件
时间: 2024-04-03 09:29:38 浏览: 302
window.addEventListener是JavaScript中用于添加事件监听器的方法,可以用来监听各种事件。以下是一些常见的window.addEventListener的监听事件:
1. "load":当页面完全加载后触发,包括所有图像、样式表和脚本等资源。
2. "unload":当页面即将被卸载时触发,通常用于执行一些清理操作。
3. "resize":当窗口大小发生改变时触发。
4. "scroll":当页面滚动时触发。
5. "click":当鼠标点击某个元素时触发。
6. "keydown":当按下键盘上的任意键时触发。
7. "keyup":当释放键盘上的任意键时触发。
8. "mouseover":当鼠标指针移动到某个元素上方时触发。
9. "mouseout":当鼠标指针移出某个元素时触发。
相关问题
window.addeventlistener监听哪些事件
### 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);
```
上述代码片段展示了添加以及随后安全地删除一个简单的窗口重设大小事件处理器的方法。
window.addEventListener有哪些事件
window.addEventListener可以监听多种事件,包括但不限于:
1. click:鼠标点击事件
2. load:页面或资源加载完成事件
3. scroll:滚动条滚动事件
4. keydown:键盘按下事件
5. resize:窗口大小改变事件
6. mouseover:鼠标移入事件
7. mouseout:鼠标移出事件
8. submit:表单提交事件
阅读全文
相关推荐















