事件分类

1，实现一个拖拽的小功能

//小方块的拖拽
function drag(elem){}
    var div = document.getElementsByTagName('div')[0];
    var disX,
       disY;
    div.onmousedown  = function (e) {
        disX = e.pageX - parseInt(div.style.left);//确定移动的中心点
        disY = e.pageY - parseInt(div.style.top);

        document.onmousemove = function(e) {
            var event = e || window.event;
            div.style.left = e.pageX - disX + "px";
            div.style.top = e.pageY -  disY +"px";
        }
        document.onmouseup = function (){
            div.onmousemove = null;
        }
    }

一个非常老版的方法，只有IE能用，它会把页面所有的事件捕获到自己身上，那么就可以解决拖拽的时候，鼠标快于系统帧频的速度。（鼠标指针飞出去了，但是div没有跟着移动的问题）
elem.setCapture(); elem.releaseCapture();

2，事件分类

鼠标事件

1. click
2. mousemove
3. mousedown------------mouseup
4. contextmenu（右键菜单栏）
5. mouseover-----------mouseout
6. mouseenter----------mouseleave(迎合h5的新特性)

//一次click = mousedown + mouseup
document.onclick = function() {
        console.log('onclick');
    }
    document.onmousedown = function() {
        console.log('mousedown');
    }
    document.onmouseup = function() {
        console.log('mouseup');
    }

拓展一下：移动端onmousemove，onmousedown，onmouseup不好使，要用  touchmove ，touchstart ，touchend

7. 用button来区分鼠标的左右键
   DOM3标准规定：click事件只能监听左键，只能通过mousedown和mouseup才能区分鼠标左右键

document.onmousedown = function(e) {
    if(e.button == 2){
        console.log('right');
    }else if(e.button == 0){
        console.log('left');
    }
}

8. 案例：实现一个a标签的小方块拖拽（拖拽不等于点击）

用时间差来确定它是点击还是拖拽，点击的时间差是非常短的。
var firstTime = 0;
var lastTime = 0;
var key = false;
document.onmousedown = function () {
    firstTime = new Date().getTime();
}
document.onmouseup = function () {
    lastTime = new Date().getTime();
    if(lastTime - firstTime < 300){
        key = true;
    }
}
document.onclick = function () {
    if(key){
        console.log('click');
        key = false;
    }
}

键盘事件

1. keydown
2. keyup
3. keypress
4. keydown > keypress > keyup
5. keydown 和keypress很相似，但是也有区别
   • keydown 可以敲响任意按键
   • keypress只可以敲响字符类键盘按键，然后返回ASCII码，可以转换成相应字符

//转换成相应字符
document.onkeypress = function (e) {
    console.log(String.fromCharCode(e.CharCode));
}

//一次keypress 不等于keydown +  keyup， 它们是这样的关系：keydown > keypress > keyup
 document.onkeypress = function() {
       console.log('onkeypress');
   }
   document.onkeydown = function() {
       console.log('onkeydown');
   }
   document.onkeyup = function() {
       console.log('keyup');
   }

文本操作事件

1. input
2. focus
3. blur
4. change

input事件监听input输入栏的值
var input = document.getElementsByTagName('input')[0];  
input.oninput = function(e){
    console.log(this.value);
}

change事件其实是比较聚焦前和失焦时候的两个状态的不同
var input = document.getElementsByTagName('input')[0];  
input.onchange = function(e){
    console.log(this.value);
}

5. 小案例，实现输入栏的聚焦输入信息，失焦依旧有提示信息

<input type = "text" value="请输入用户名" onfocus="if(this.value == '请输入用户名'){this.value = ''}" onblur="if(this.value == ''){this.value = '请输入用户名'}">

窗体操作类（window上的事件）

1. scroll
2. load(window.onload()是要等到DomTree和CssTree生成后渲染成RenderTree后，才开始调用js)

ie6没有position : fixed定位
实现兼容

3，总结