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

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

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

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

拖放事件
相關(guān)事件：dragstart、drag、dragend、dragenter、dragover、dragleave、drop

投放目標(biāo)
被拖拽的物體

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事件：需要阻止默認(rèn)行為以防止屏幕滾動
touchcancel事件：當(dāng)系統(tǒng)停止跟蹤觸摸時觸發(fā)
gesturestart事件：當(dāng)一個手指已經(jīng)按在屏幕上而另一個手指又觸摸時觸發(fā)
gesturechange事件：當(dāng)觸摸屏幕的任何一個手指的位置發(fā)生變化時改變
gestureend事件：當(dāng)任何一個手指從屏幕上面移開時觸發(fā)
觸摸事件特有的event對象屬性：
　　touches(表示當(dāng)前跟蹤的觸摸操作的Touch對象的數(shù)組)
　　targetTouchs(特定于事件目標(biāo)的Touch對象的數(shù)組)
　　changeTouches(上次觸摸以來發(fā)生了什么改變的Touch對象的數(shù)組)
　　rotation(手勢變化引起的旋轉(zhuǎn)角度，從0開始，順正逆負(fù))
　　scal(手指間的距離變化，從1開始，與距離呈正相關(guān))

模擬事件
UIEvents UI事件
MouseEvents 鼠標(biāo)事件
MutationEvents DOM變動事件
HTMLEvents HTML事件

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

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

繪圖技術(shù)
canvas：2D繪圖，可進行圖片與圖像的互轉(zhuǎn)，通過變換和合成繪制復(fù)雜圖像

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

svg：支持事件驅(qū)動，通過foreignObject可實現(xiàn)svg和普通HTML元素的融合
WebGL：3D繪圖，非W3C標(biāo)準(zhǔn)

ajax
Asynchronous Javascript And XML，即異步JavaScript和XML，是一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。

//封裝ajax
function ajax(obj) {
  var xhr = new XMLHttpRequest(); //創(chuàng)建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(); } //異步請求當(dāng)readyState == 4才執(zhí)行回調(diào)
  xhr.open(obj.method, obj.url, obj.async); //發(fā)送請求
  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); } //回調(diào)傳遞參數(shù)
    else{ console.log("獲取數(shù)據(jù)錯誤！錯誤代號：" + xhr.status + "，錯誤信息：" + xhr.statusText); }
  }
}

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

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

File API

let reader = new FileReader();
reader.readAsText(file,encoding); //以純文本的形式讀取文件，讀取到的文本保存在result屬性中
//reader.readAsDataURL(file); //讀取文件以數(shù)據(jù)URI的形式保存在result屬性中
//reader.readAsBinaryString(file); //讀取文件并將一個字符串保存在result屬性中，字符串中的每個字符表示一字節(jié)
//reader.readAsArrayBuffer(file); //讀取文件并將一個包含文件內(nèi)容的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); //凍結(jié)對象，不可拓展、且密封、不可編輯

String、JSON、Object相互轉(zhuǎn)化

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

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

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

//將js對象中的函數(shù)字符串解析為函數(shù)
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對象中的函數(shù)類型轉(zhuǎn)為字符串
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;
}

定時器

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

//間歇調(diào)用
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與文本的轉(zhuǎn)換

//字符串轉(zhuǎn)html字符串，參數(shù)：html傳入的字符串，type是否返回標(biāo)簽結(jié)構(gòu)，默認(rèn)只返回內(nèi)容，escape表示是否需要轉(zhuǎn)義
function escapeHtml(html,type,escape){ //type:content/html,escape:轉(zhuǎn)義/不轉(zhuǎn)義
  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;
}

錯誤處理

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

//強制報錯
var err = new Error("錯誤信息");
console.error(err); //單純?nèi)罩据敵?，不影響代碼執(zhí)行
throw err; //顯示報錯，導(dǎo)致后面代碼不解析