1.事件總結

 滑鼠事件

var box = document.querySelect('.box')
// 1.點選事件
box.onclick = function(){
   console.log('單擊');     
};
// 2.雙擊事件（應用場景不廣）
box.ondblclick = function(){      
    cosole.log("雙擊"）
}
// 3.滑鼠右鍵
box.oncintextment = function(){
    console.log("右鍵了")
    return false;
};
// 4.滑鼠懸浮 | 移動  | 按下 | 擡起 | 離開
 

box.onmouseover = function(){
    console.log("懸浮"）;
};
box.onmousemove = function(){
    console.log("移動");
);
box.onmousedown = function(){
    console.log("按下");
};
box.onmouseup = function(){
    console.log("擡起")
};
box.onmouseout = function(){
    console.log("離開");
};

 over | out vs enter | leave

總結：

　　1.將子級與父級分開考慮，大家都有各自的懸浮離開事件，採用 over | out組合

　　2.將子級納入父級考慮範圍，也就是隻有父級取相應懸浮離開事件，採用enter | leave組合

　　3.單獨考慮一個盒子的懸浮離開事件，兩套均可以

特性：

　　從父級移至子級，會觸發out事件，緊接著觸發子級的over事件，並可以冒泡給父級

　　從父級移至子級，leave事件並不會觸發，它認為子級是屬於父級的一部分，enter事件，也不   　　會再次觸發

懸浮子級:

　　sub over => sup over 支援冒泡

　　sub enter =>sub enter 不支援冒泡

鍵盤事件

　　onkeydown: 鍵盤按下會觸發，長按會持續觸發

　　onkeup: j鍵盤擡起會觸發

　　ev.keyCode:按下的鍵盤鍵的標號

其他事件

　　window.onload:頁面載入完畢觸發

　　window.onscroll | document.onscroll => window.scrollY(頁面下滾距離）：頁面滾動觸發

二.js盒模型

content:通過計算後樣式獲取
padding + content + content:box.offsetWidth | box.offsetHeight
絕對定位top|left:box.offsetTop | box.offsetLeft

三.動畫

 定時器

// 一次性定時器
var timeout = setTimeout(function(a,b){},1000,10,20);

// 持續性定時器
var timer = setInterval(function(a,b){},1000,10,20);

// 清除定時器
// clearTimeout | clearInterval

// 結論：
// 1.定時器劊立即執行
// 2.一次定時器只能執行一次，持續性定時器不做清除的話會一直執行
// 3.宣告定時器第一個引數為邏輯函式地址，第二個引數為事件間隔，第三個為邏輯函式所需要引數（可以為多個，一般省略）
// 4.清除定時器可以混用，本質就是清除建立定時器的數字標號，該編號激素是建立定時器的返回值

// 小技巧：如果頁面中有n個定時器
var n = setTimeout(function(){},1);
for (var I = 1;i <n; I++){
    clearInterval(i)
}