事件分类

鼠标事件

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

用button来区别鼠标的按键

DOM3标准规定: click事件只能监听左键, 只能通过mousedown和mouseup来判断鼠标键

鼠标左键button = 0, 右键button = 2, 滑轮 button = 1

eg:

var p = document.getElementsByTagName('p')[0];
p.onmousedown = function (e) {
    var event = e || window.event;
    if(event.button == 2){
        console.log('right');
    }else if(event.button == 0){
        console.log('left');
    }
}

如何解决mousedown和click的冲突

应用时间差去区别, click的点击时间快

eg:

var p = document.getElementsByTagName('p')[0];
var key = false;
var firstTime = 0;
var lastTime = 0;
p.onclick = function() {
    if(key){
        console.log('click');
        key = false;
    }
}
p.onmousedown = function() {
    firstTime = new Date().getTime();
    console.log('mouseDown');
}
p.onmouseup = function() {
    console.log('mouseUp');
    lastTime = new Date().getTime();
    if( (lastTime - firstTime) < 200){
        key = true;
    }
}

键盘事件

keydown keyup keypress

keydown > keypress > keyup

keydown和keypress的区别

keydown可以响应任意键盘按键, keypress只可以相应字符类键盘按键

keypress返回ascii码, 可以转换成相应字符串, charCode属性记录ascii, 并且keypress还可以记录大小写, 然而keydown不能, 但是keydown可以读到所有按键, 例如上下左右, keydown只有which

文本操作事件

input //当文本框输入值时触发事件

focus//聚焦

blur//失焦

change//判断一次聚焦失焦时文本内容是否发生变化, 变化时触发事件

窗口操作类

scroll//当滚动条滚动时触发

load//页面加载完毕之后执行