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);