js 鼠标事件

一、click、mousedown、mouseup

    click事件只能监听鼠标左键：

//点击鼠标左键得到：'onclick',右键无效果
document.onclick = function (e) {

    console.log('onclick')

}

 

click、mousedown、mouseup触发顺序：

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


document.onmousedown = function (e) {
    console.log('onmousedown')
}


document.onmouseup = function (e) {
    console.log('onmouseup')
}

结果：

即：先执行mousedown(鼠标按下)、mouseup(鼠标松开)、再执行click

        click = mousedown+mouseup

但有一些区别，mousedown和mouseup鼠标左键、中键、右键都可触发

二、keydown、keyup、kepress

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

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

document.onkeyup = function (e) {
    console.log('onkeyup')
}

触发顺序：输出结果 

 

keydown 可以响应任意键盘按键

keypress 只可以响应字符类按键(字母、数字(只能识别字母上部数字，键盘右侧数字不能识别))

具体区别：

document.onkeypress = function (e) {

    console.log('onkeypress')
    console.log(e)
}

document.onkeydown = function (e) {

    console.log('onkeydown')
    console.log(e)
}

按下键盘字母a键得到：

可以看到keypress 有ASCII码：charcode。可以转成相应字符

String.fromCharCode(e.charCode)可以得到相应字符

直接使用e.key也能获取到