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也能擷取到