H5高级

HTML5 Core

1. 新表单元素
2. 新表单验证API
3. 多媒体处理（视频、音频）
4. Canvas
5. 新API（拖拽、web存储）

表单相关：

新元素datalist 、progress、 meter 、output

新api方法：定制验证消息、实现表单验证

• setCustomValidity( ) ：h5有自带提示框（required），该方法可以修改提示种的文字；
• 无错误时需要调用setCustomValidity(‘’)，置空消息提示，否则无法提交表单；
• checkValidity() ：返回验证是否通过。
• res = ele.checkValidity(); // res为布尔值，通过为真

新事件：invalid事件，表单执行遇到错误即会触发；

formEle.addEventListener(‘invalid’,fn,false);//fn中通过事件获取出问题的第一个表单元素；

• ValidityState对象：通过元素的validity属性获取，返回表单验证的各种状态；
• ele.validity;

Canvas：

绘图元素，配合js，先用 getContext(“2d”) 得到画布上下文（理解为画笔），通过上下文调用api绘图。
方法api查看地址：http://www.w3school.com.cn/ht...

拖放API：

两个关键点：源元素（被拖放的元素），目标元素（一个容器）。

源元素事件：

• dragstart：开始拖动时，触发
• drag：拖动过程中触发
• dragend：拖动结束时，触发

目标元素事件：

• dragenter：拖动过程，鼠标第一次进入目标元素区域；
• dragover：当对象拖动到目标对象时，悬浮在目标元素
• drop：在目标元素投放时（松手）触发
• dragleave：对象离开目标元素时触发
• 注意：执行上述方法时，通过 preventDefault 方法阻止默认事件。

dataTransfer对象：保存拖放过程中的各种组件数据，通过事件对象 e 获取。

dataTransfer = e.dataTransfer // 对象，常用的4个方法：
-setData('type', 'data')：// 声明设置的数据和类型
-getData('type')：// 获取类型的数据
-clearData('type')：// 删除类型数据
-setDragImage(img, x, y)：// 拖放的过程中，鼠标指针指向一个虚图，该方法可以修改这个图。