js事件分类

鼠标事件

click、mousedown、mousemove、mouseup、contextmenu、mouseover、mouseout、 mouseenter mouseleave

click = mousedown + mouseup

触发顺序

document.onclick = function () {
    console.log('click')
}

document.onmousedown = function () {
    console.log('mousedown')
}
document.onmouseup = function () {
    console.log('mouseup')
}
// mousedown
// mouseup
// click

contextmenu 右键产生菜单事件

mouseover 鼠标移入

mouseout 鼠标移出

mouseenter 鼠标移入；H5方法

mouseleave 鼠标移出： H5方法

这几个和css中的hover比较像；而且hover的运算速度是最快的

用button来区分鼠标的按键，0/1/2

document.onmousedown = function (e) {
    console.log(e.button)
}
//左键； button : 0
//右键： button : 2
//滚轮： button : 1

注意： onmousedown与onmouseup可以触发button；但是click只能触发左键，不能触发右键和滚轮

---

实现拖拽不等于点击
要点：时间差

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;
    }else{
        console.log('执行拖拽程序')
    }
}

document.onclick = function () {
    if(key) {
        console.log('click');
        key = false;
    }
}

移动端

在移动端上，onmousedown就不能用了；要用touch事件
touchstart

touchmove

touchend

键盘事件

onkeypress onkeydown onkeyup
keydown > keypress > keyup

键	keydown	keypress
a	charCode : 0	charCode : 97
上下左右 control	charCode : 0	不触发keypress

keydown可以检测到所有键盘类事件；不能检测大小写，所有都按大写的算
keypress只可以检测到字符类按键

---

文本类操作事件

input,focus,blur,change

input	focus	blur	change
输入一次变化一次；删除一次变化一次	失去焦点显示的状态	聚焦显示的状态	聚焦前后发生改变就用变化

var input = document.getElementsByTagName('input')[0];
input.oninput = function (e) {
    console.log(this.value);
}

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

---

窗体操作类(window上的事件)

scroll

window.onscroll = function () {
    console.log(window.pageXOffset + " " + window.pageYOffset);
}

load

window.onload = function () {

}

这个方法是最慢的；效率最低（可以用来提醒页面下载完成或者加载广告；绝对不能把主程序放在里面）
把<script>写在页面的最后是等页面解析完成再下载js代码；而用window.onload则是要等页面下载完成再下载js代码；速度非常慢

---

fixed定位，兼容IE6