本文共 2019 字，大约阅读时间需要 6 分钟。

1，

事件无大驼峰或者小驼峰的规则，单词直接拼接。

（1）mouseenter（over）与mouseleave（out）

var div = document.getElementsByTagName('div')[0];    div.onmouseenter = function (){        div.style.background = 'yellow';    }    div.onmouseleave = function(){        div.style.background = 'green';    }相当于hover

（2）监听鼠标左右键

document.onmousedown = function(e){        if(e.button == 0){            console.log('点击的是左键');        }else if(e.button == 2){            console.log('点击的是右键');        }else{            console.log('滑动滚轮')        }    }

（3）利用时间差解决mousedown和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;         }     }     document.onclick = function(){         if (key){             console.log('click');             key = false;         }     }

2，

（1）

document.onkeydown = function (e){        console.log(e);    }    document.onkeypress = function (e){        console.log(e);    }

转换为响应字符：

document.onkeypress = function (e){        console.log(e.charCode);        console.log(String.fromCharCode(e.charCode))    }

3，

（1）input：有输入或者退格有改变都会触发

​

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

（2）change：鼠标聚焦和离开时候或者输入框有变化时候，触发

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

var input = document.getElementsByTagName('input')[0];    input.onfocus = function(e){        if(this.value == '请输入用户名'){            this.value =' ';            this.style.color = '#424242';        }    }    input.onblur = function (e){        if(this.value == ' '){            this.value = '请输入用户名'            this.style.color = '#999';        }    }

4，

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

5,

转载地址：http://hmtzi.baihongyu.com/