事件细分

Posted 2021-01-12 y-dt

鼠标相关事件执行顺序

与 onmousedown 事件相关连得事件发生次序（ 鼠标左侧/中间 按钮）：

1. onmousedown
2. onmouseup
3. onclick

与 onmousedown 事件相关连得事件发生次序 (鼠标右侧按钮):

1. onmousedown
2. onmouseup
3. oncontextmenu

区别拖拽和点击

通过鼠标按键间隔来区分

var firstTime = 0;
var lastTime = 0;
var key = false;
document.mousedown = function(){
    firstTime = new Date().getTime();
    drap...;//执行拖拽
}

document.onmouseup = funciton(){
    lastTime = new Date().getTime();
    if(lastTime - firstTime < 300){
        key = true;
    }
}
document.onclick = function(){
    if(key){
        console.log(‘click‘);
        key = false;
    }
}

mousedown&mouseup与click的小差别

mousedown和mouseup的event对象可以通过button属性区分鼠标左中右键。而click无法区分右键，因为右键无法触发click事件。

键盘相关事件执行顺序

与 onkeydown 事件相关联的事件触发次序:

1. onkeydown
2. onkeypress
3. onkeyup

keydown和keypress的小区别

• keydown可以响应任意键盘按键，keypress只可以响应字符类键盘按键。

• keypress返回ASCII码，可以转换为相应字符。

如果监听字符类按键并且要区分大小写，用keypress

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

如果操作类按键就用keydown

oninput和onchange

oninput通过内容变化来触发

onchange通过聚焦和失焦两个状态下input的value值是否有差别来触发。