H5高階

HEJAX發表於2019-02-16
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)：// 拖放的過程中，滑鼠指標指向一個虛圖，該方法可以修改這個圖。

相關文章