鼠标键盘事件监听整理

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

事件名

1. 键盘按键按下与弹起
2. 鼠标左击与右击
3. 鼠标按下与弹起
4. 鼠标进入、移动、移出

1、键盘按键按下与弹起

介绍

onkeydown：键盘键按下时被触发，onkeydown：键盘键抬起时被触发。事件返回值如下图，关键字段："key"按键名，"keycode"按键代表的数字， "type"按键触发的事件类型keydown代表按下keyup弹起

注意：当按键处于按下状态时事件会持续触发，弹起仅触发一次

用法

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

事件打印

2、鼠标左击和右击

介绍

click：鼠标点击事件，contextmenu：鼠标右击事件

注意：事件仅触发一次，且是在按键抬起时触发，右击自定义事件需要先阻止默认右击事件e.preventDefault()

用法

document.addEventListener('click',function(e){
  console.log('click',e)
},false)
document.addEventListener('contextmenu', e => {
  e.preventDefault();//阻止默认事件
  console.log('contextmenu',e)
},false);

事件打印

3、鼠标按下和抬起

介绍 mousedown：鼠标左键或右键按下时触发；mouseup：鼠标左键或右键抬起时触发

用法

document.addEventListener('mousedown',function(e){
  console.log('mousedown',e)
},false)
document.addEventListener('mouseup', e => {
  e.preventDefault();//阻止右击默认事件
  console.log('mouseup',e)
},false);

事件打印

4、鼠标进入、移动、移出

介绍 mouseover：鼠标进入, mouseout：鼠标离开, mousemove：鼠标移动

用法

document.addEventListener('mouseover',function(e){
  console.log('mouseover',e)
},false)
document.addEventListener('mouseout', e => {
  console.log('mouseout',e)
},false);
document.addEventListener('mousemove', e => {
  console.log('mousemove',e)
},false);

事件打印