DOM Event （javascript 各種事件整理彙總）

DOM 事件：

滑鼠事件

點選事件：

down>up>click

三個事件都冒泡

移動事件：

overover>enter,out>leave

over和out冒泡，enter和leave步冒泡；

move 冒泡

進入子節點觸發out，不觸發leave

離開子節點觸發子節點out然後leave，冒泡父節點out，leave不冒泡；

鍵盤事件：

keydown-> keypress-> keyup

進度事件：

就是發送ajax請求、加載圖檔、視訊、樣式表等資源時觸發的事件

var xhr = new XMLHttpRequest();
var func = function(evt){
    console.log(evt.type);
};
xhr.addEventListener('progress',func, false);
xhr.addEventListener('load',func, false);
xhr.addEventListener('loadstart',func, false);
xhr.addEventListener('loadend',func, false);
xhr.addEventListener('abort',func, false);
xhr.addEventListener('error',func, false);
xhr.open('get', 'http://ux.alibaba.net/static/js/libs/ace/ace.js',true);
xhr.send();      

loadstart->progress->load>loaded      

觸摸事件：

針對觸摸屏

和滑鼠點選事件類似：

touchstart->touchmove->touchmove

意外終止：touchcancel

表單事件：

input、change、reset、submit

文檔事件：

表示對整個頁面适用的事件：

window.addEventListener("beforeunload", function (evt) {
    evt.returnValue = 'leave';
},false);
window.addEventListener("load", function (evt) {
    console.log("load");
},false);
window.addEventListener("resize", function (evt) {
    console.log("resize");
},false);
window.addEventListener("scroll", function (evt) {
    console.log("scroll");
},false);