鼠标键盘事件监听整理

事件名

键盘按键按下与弹起

鼠标左击与右击

鼠标按下与弹起

鼠标进入、移动、移出

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);

事件打印

原文：https://juejin.cn/post/7101693270362685447