頁面事件
pageshow事件：頁面顯示時觸發，事件目標為document，但必須將其事件處理程序添加到window，參數為event
pagehide事件：頁面卸載時觸發，事件目標為document，但必須將其事件處理程序添加到window，參數為event
haschange事件：URL的參數列表發生變化時觸發，但必須將其事件處理程序添加到window，參數為event
visibilitychange事件：綁定在document上，當頁面最小化或切換瀏覽器標簽等可見狀態改變觸發，documen.hidden可查看頁面可見度狀態

document.addEventListener("visibilitychange",function(){
  console.log(document.hidden);
})

表單事件
默認行為：表單中的最后一個按鈕會自動提交表單
form.submit()主動提交表單
form.reset()重置表單
form.checkValidity()表單驗證配合require和pattern使用
noValidate屬性禁用表單驗證
過濾輸入，屏蔽某些詞的默認行為：監聽keypress事件，e.preventDefault();
富文本編輯的實現：
①iframe實現，空文檔的designMode設置為on，getSeclection事件獲取具體信息；
②設置contenteditable屬性實現，通過document.execCommand()實現富文本操作，如document.execCommand("blod", false, null);實現粗體文本。

鼠標事件
雙擊事件順序：mousedown、mouseup、click、mousedown、mouseup、click、dblclick
移入容器事件順序過程：mouseover（在不同元素間觸發）、mouseenter、mousemove、mouseout（在不同元素間觸發）、mouseleave
右鍵點擊事件：contextmenu(H5事件)
位置信息：
　　clientX(鼠標相對于瀏覽器窗口可視區域的X坐標)
　　offsetX(鼠標相對于事件源元素的X坐標,存在兼容性問題)
　　screenX(鼠標相對于用戶顯示器屏幕左上角的X坐標)
　　pageX(鼠標相對于文檔區域的X坐標,存在兼容性問題)
event對象屬性：
　　type(事件類型)
　　detail(點擊次數)
　　target(事件源元素)
　　path(數組，冒泡的路徑)

拖放事件
相關事件：dragstart、drag、dragend、dragenter、dragover、dragleave、drop

投放目標
被拖拽的物體

dragover(e){
  e.preventDefault();
}
drag(e){
  e.dataTransfer.setData("id",e.target.id);
}
drop(e){
  e.preventDefault();
  let data = e.dataTransfer.getData("id");
  e.target.appendChild(document.getElementById(data));
}

觸摸與手勢事件
移動端點擊事件順序：touchstart、touchend、mouseover、mouseenter、mousemove、mousedown、mouseup、click
touchmove事件：需要阻止默認行為以防止屏幕滾動
touchcancel事件：當系統停止跟蹤觸摸時觸發
gesturestart事件：當一個手指已經按在屏幕上而另一個手指又觸摸時觸發
gesturechange事件：當觸摸屏幕的任何一個手指的位置發生變化時改變
gestureend事件：當任何一個手指從屏幕上面移開時觸發
觸摸事件特有的event對象屬性：
　　touches(表示當前跟蹤的觸摸操作的Touch對象的數組)
　　targetTouchs(特定于事件目標的Touch對象的數組)
　　changeTouches(上次觸摸以來發生了什么改變的Touch對象的數組)
　　rotation(手勢變化引起的旋轉角度，從0開始，順正逆負)
　　scal(手指間的距離變化，從1開始，與距離呈正相關)

模擬事件
UIEvents UI事件
MouseEvents 鼠標事件
MutationEvents DOM變動事件
HTMLEvents HTML事件

模擬鼠標點擊事件：
1.創建鼠標事件的event對象
let event = document.createEvent("MouseEvents");
2.設置觸發的參數 //可簡寫，如event.initMouseEvent("click");
event.initMouseEvent(事件類型,...event對象其他參數);
/*參數順序：type、bubbles(是否冒泡)、cancelable(事件是否可取消)、view(document.defaultView)、detail、screenX、screenY、clientX、clientY、ctrlKey(是否按下ctrl)、altKey(是否按下alt)、shiftKey(是否按下shiftKey)、metaKey(是否按下metaKey)、button(表示按下哪個鼠標鍵)、relatedTarget(事件相關的對象，用于模擬mouseover/mouseout)*/
3.觸發事件
document.getElementById("btn").dispatchEvent(event);

媒體元素
音頻播放器：audio
視頻播放器：video
通過play()和pause()可手工控制媒體文件的播放和暫停，ended事件當播放結束時觸發

繪圖技術
canvas：2D繪圖，可進行圖片與圖像的互轉，通過變換和合成繪制復雜圖像

//獲取canvas內容生成的URI
let imgURI = canvas.toDataURL("image/png");
let img = document.createElement("img");
img.src = imgURI;
document.body.appendChild(img);

svg：支持事件驅動，通過foreignObject可實現svg和普通HTML元素的融合
WebGL：3D繪圖，非W3C標準

ajax
Asynchronous Javascript And XML，即異步JavaScript和XML，是一種創建交互式網頁應用的網頁開發技術。

//封裝ajax
function ajax(obj) {
  var xhr = new XMLHttpRequest(); //創建XMLHttpRequest實例
  obj.url = obj.url + "?rand=" + Math.random(); //為url加時間戳
  if(obj.method === "get") obj.url += "&" + obj.data;
  if(obj.async) xhr.onreadystatechange = ()=>{ (xhr.readyState == 4) && callback(); } //異步請求當readyState == 4才執行回調
  xhr.open(obj.method, obj.url, obj.async); //發送請求
  if(obj.method === "post"){
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send(obj.data); 
  }else{
    xhr.send(null);
  }
  if(!obj.async) callback(); //同步請求
  function callback() {
    if(xhr.status == 200){ obj.success(xhr.responseText); } //回調傳遞參數
    else{ console.log("獲取數據錯誤！錯誤代號：" + xhr.status + "，錯誤信息：" + xhr.statusText); }
  }
}

ajax({
  method : "post/get",
  url : "...",
  data : "",
  success : (res)=>{
    console.log(res);
  },
  async : true
});

get與post請求
get請求：從指定的資源請求數據，數據量和類型有限制（因為數據放在請求頭中，瀏覽器對其長度有限制），會被緩存，且數據在url上可見，導致安全性相對低點。
post請求：向指定的資源提交被處理的數據，數據量和類型沒限制，不主動緩存，頁面刷新數據會被重新提交。
底層分析：對于get請求，瀏覽器會把http header和data一并發送出去，服務器響應200（返回數據），整個過程產生一個TCP數據包；對于post請求，瀏覽器先發送header，服務器響應100 continue，瀏覽器再發送data，服務器響應200 ok（返回數據），整個過程產生兩個TCP數據包，導致時間消耗，網絡環境暢通情況下可無視。

File API

let reader = new FileReader();
reader.readAsText(file,encoding); //以純文本的形式讀取文件，讀取到的文本保存在result屬性中
//reader.readAsDataURL(file); //讀取文件以數據URI的形式保存在result屬性中
//reader.readAsBinaryString(file); //讀取文件并將一個字符串保存在result屬性中，字符串中的每個字符表示一字節
//reader.readAsArrayBuffer(file); //讀取文件并將一個包含文件內容的ArrayBuffer保存在result屬性中
reader.progress = (event)=>{
  if(event.lengthComputable){
    console.log(event.loaded + "/" + event.total);
  }
}
reader.onerror = ()=>{
  console.log(reader.error.code);
}
reader.onload = function(){
  console.log(reader.result);
}

對象防篡改

Object.preventExtensions(obj);  //對象不可拓展，禁止添加屬性或方法
Object.seal(obj); //密封對象，不可刪除屬性和方法
Object.freeze(obj); //凍結對象，不可拓展、且密封、不可編輯

String、JSON、Object相互轉化

//js對象轉JSON
function jsToJSON(obj){
  let objFnToStr = fnToStr(obj);
  return JSON.stringify(objFnToStr);
}

//字符串轉JSON
function strToJSON(str){
  let obj = eval("("+str+")");
  return jsToJSON(obj);
}

//JSON轉js對象
function JSONToJs(json){
  let obj = JSON.parse(json);
  return strToFn(obj);
}

//將js對象中的函數字符串解析為函數
function strToFn(obj){
  var o = obj instanceof Array ? [] : {};
  for(var k in obj) {
    switch(typeof(obj[k])){
      case "object":
        o[k] = obj[k] ? strToFn(obj[k]) : null;
        break;
      case "string":
        o[k] = obj[k].match(/^s*(functions*(.*)s*)|((.*)s*=>s*)/) ? eval("("+obj[k]+")") : obj[k];
        break;
      default:
        o[k] = obj[k];
        break;
    }
  }
  return o;
}

//將js對象中的函數類型轉為字符串
function fnToStr(obj){
  var o = obj instanceof Array ? [] : {};
  for(var k in obj) {
    switch(typeof(obj[k])){
      case "object":
        o[k] = obj[k] ? fnToStr(obj[k]) : null;
        break;
      case "function":
        o[k] = obj[k] + "";
        break;
      default:
        o[k] = obj[k];
        break;
    }
  }
  return o;
}

定時器

//延遲調用
let timeId = setTimeout(fn,time);
clearTimeout(timeId);

//間歇調用
let timeId = setInterval(fn,time);
clearInterval(timeId);

//定時器中的定時器
setTimeout(function(){
  //...
  setTimeout(arguments.callee, interval);
})

//沉睡排序法
[1,5,2,4,100,3].forEach(n=>{
  setTimeout(()=>{ console.log(n) }, n);
})

html與文本的轉換

//字符串轉html字符串，參數：html傳入的字符串，type是否返回標簽結構，默認只返回內容，escape表示是否需要轉義
function escapeHtml(html,type,escape){ //type:content/html,escape:轉義/不轉義
  let objE = document.createElement("div");
  objE.innerHTML = html;
  type 
    ? (escape 
      ? (html.includes("&") ? (objE.innerText = html) : (objE.innerText = new Option(html).innerHTML)) 
      : (html.includes("<") && (objE.innerText = html)))
    : (objE.innerHTML = objE.innerText);
  return objE.innerText;
}

錯誤處理

//監聽除 try catch 捕捉的錯誤
window.onerror = (...error)=>{
  window.open("http://stackoverflow.com/search?q=[js] + "+error[0]);
}

//強制報錯
var err = new Error("錯誤信息");
console.error(err); //單純日志輸出，不影響代碼執行
throw err; //顯示報錯，導致后面代碼不解析