阅读量:0
HTML5 引入了多个新事件，如
ondevicemotion、ondeviceorientation、onfullscreenchange 等，增强了网页与设备的交互能力。### HTML5 新事件小结
HTML5作为最新的超文本标记语言标准，引入了许多新的事件，这些事件极大地增强了网页的交互性和功能性，以下是对HTML5中一些主要新事件的详细介绍和示例：
#### 1. oninput 事件
**描述**: `oninput` 事件用于监听当前指定元素内容的改变，只要内容发生改变（添加元素、删除元素），就会触发这个事件。
**示例代码**:
```html
```
#### 2. onkeyup 事件
**描述**: `onkeyup` 事件在键盘弹起的时候触发，每一个键的弹起都会触发一次这个事件。
**示例代码**:
```html
```
#### 3. oninvalid 事件
**描述**: `oninvalid` 事件在验证不通过时触发。
**示例代码**:
```html
```
#### 4. onchange 和 oninput 事件的区别
**onchange** 事件只在元素失去焦点并且值发生变化时触发，而 **oninput** 事件则在每次内容变化时触发。
#### 5. 进度条相关标签和事件
**progress 标签**: 表示任务的完成进度，具有 max、min 和 value 属性。
**meter 标签**: 用于衡量当前的进度值，具有 high、low、max、min 和 value 属性。
**示例代码**:
```html
```
#### 6. 触摸事件
**touchstart**: 当手指触摸屏幕时触发。
**touchmove**: 当手指在屏幕上滑动时连续地触发。
**touchend**: 当手指从屏幕上离开时触发。
**示例代码**:
```html
Touch me```
### FAQs
**Q1: HTML5 中的 `oninput` 事件和 `onchange` 事件有什么区别？
A1: `oninput` 事件在元素的内容改变时立即触发，例如用户在输入框中输入字符时，而 `onchange` 事件只有在元素失去焦点并且值发生变化时才会触发，通常用于表单提交等场景。
**Q2: HTML5 新增的触摸事件有哪些？
A2: HTML5 新增的触摸事件包括 `touchstart`、`touchmove` 和 `touchend`，`touchstart` 在手指触摸屏幕时触发，`touchmove` 在手指在屏幕上滑动时连续触发，`touchend` 在手指离开屏幕时触发。
HTML5 新事件小结
1. 触摸事件（Touch Events）
HTML5 引入了一系列触摸事件，使得在移动设备上处理触摸交互更加方便。
touchstart: 当手指接触到屏幕时触发。
touchmove: 当手指在屏幕上移动时触发。
touchend: 当手指从屏幕上移开时触发。
touchcancel: 当触摸操作被取消时触发。
2. 指针事件（Pointer Events）
指针事件提供了一种更统一的方式处理触摸和鼠标输入。
pointerdown: 指针开始接触表面时触发。
pointermove: 指针在表面上移动时触发。
pointerup: 指针从表面上移开时触发。
pointercancel: 指针取消时触发。
pointerenter: 指针进入元素时触发。
pointerleave: 指针离开元素时触发。
pointerover: 指针悬停在元素上时触发。
pointerout: 指针从元素上移开时触发。
3. 媒体事件（Media Events）
HTML5 引入了一些与媒体播放相关的自定义事件。
play: 媒体开始播放时触发。
pause: 媒体播放被暂停时触发。
ended: 媒体播放结束时触发。
loadedmetadata: 媒体加载元数据时触发。
loadeddata: 媒体加载完成时触发。
4. 窗口事件（Window Events）
resize: 窗口大小变化时触发。
scroll: 窗口或其内容被滚动时触发。
unload: 窗口或其内容即将卸载时触发。
5. 表单事件（Form Events）
input: 表单元素值变化时触发。
change: 表单元素值变化且失去焦点时触发。
submit: 表单提交时触发。
6. 网络事件（Network Events）
online: 网络连接时触发。
offline: 网络断开时触发。
7. 其他事件
fullscreenchange: 全屏模式变化时触发。
orientationchange: 设备方向变化时触发。
是对 HTML5 新事件的简要归纳，具体实现和使用时还需参考相关文档和示例代码。
