博客
关于我
强烈建议你试试无所不能的chatGPT，快点击我
JavaScript键盘鼠标事件处理
阅读量：5101 次
发布时间：2019-06-13

本文共 11907 字，大约阅读时间需要 39 分钟。

原文:

监听键盘鼠标事件

监听某个按键事件

当键盘上的某个键被按下时，会依次触发一次下面的事件：

  • onkeydown: 键盘按下这个动作（按下键盘）
  • onkeypress: 键盘被按住（一直按着键盘不动）
  • onkeyup: 键盘被弹起（松开键盘）

通过监听keydown事件既可以知道键盘被按下：

document.onkeydown = function(event) {    // 键盘按下时触发    console.log('key down');};document.onkeypress = function(event) {    // 键盘按住时触发    console.log('key press');};document.onkeyup = function (event) {    // 键盘弹起时触发    console.log('key up');};// 控制台数据的顺序为：key down -> key press -> key up

注意到键盘按下的event参数，该参数为KeyboardEvent事件对象，其中包含按键相关的一些属性。其中：

  • type: 事件类型，如'keydown'或者'keyup'
  • key: 表示按下的键盘内容是什么即键值，按下字母'p'时，值为'p'
  • code: 表示键盘代码，按下字母'p'时，值为'KeyP'
  • keyCode(过时): 整数，表示键码，每个键都有唯一的键码，字母'p'的键码为80
  • altKey: 布尔值，表示此时的alt键是否也按下
  • ctrKey: 布尔值，表示此时的alt键是否也按下
  • shiftKey: 布尔值，表示此时的shift键是否也按下
  • metaKey: 布尔值，windows平台表示Window键是否同时按下，mac表示Command键是否同时按下
  • repeat: 布尔值，如果一个键一直被按着，则其值为true，表示重复

可以通过检查这些属性来判断用户按下的是什么键，以及是否ctrl和alt等键是否同时按下。

document.onkeydown = function(event) {    // 键盘按下是触发    console.log('key down: ' + event.key);    if (event.altKey) {        console.log('alt is active');    }    if (event.shiftKey) {        console.log('shift is active');    }};

监听鼠标事件

相应的也可以监听鼠标相关的事件，触发时的参数event为MouseEvent对象类型：

  • onclick: 鼠标点击事件
  • ondblclick: 鼠标双击事件
  • onmousedown: 鼠标上的按钮被按下了
  • onmouseup: 鼠标按下后松开时触发的事件
  • onmousemove: 鼠标移动时触发的事件
  • onmouseout: 鼠标离开监听该事件的元素或子元素时触发的事件
  • onmouseover: 鼠标移动到监听该事件的元素或子元素时触发的事件
  • onmousewheel: 鼠标滚轮事件，一般使用onscroll事件

MouseEvent对象中包含下面比较有用的属性：

  • type: 事件类型，如'mosemove'或者'mousedown'
  • button: 整型，触发鼠标事件时按下的按钮编号
  • buttons: 整型，触发鼠标事件时弹起来的按钮编号
  • clientX: 鼠标指针在DOM内容区的X坐标
  • clientY：鼠标指针在DOM内容区的Y坐标
  • offsetX: 鼠标指针相对父节点填充边缘的X坐标
  • offsetY: 鼠标指针相对父节点填充边缘的Y坐标
  • screenX: 鼠标指针在全局屏幕的X坐标
  • screenY: 鼠标指针在全局屏幕的Y坐标
  • pageX: 鼠标指针在整个DOM内容（包括分页）的X坐标
  • pageY: 鼠标指针在整个DOM内容（包括分页）的Y坐标
  • altKey: 布尔值，表示此时的alt键是否也按下
  • ctrKey: 布尔值，表示此时的alt键是否也按下
  • shiftKey: 布尔值，表示此时的shift键是否也按下
  • metaKey: 布尔值，windows平台表示Window键是否同时按下，mac表示Command键是否同时按下

通过鼠标事件的event属性，可以获取鼠标点击的位置，，鼠标点击时是否按住ctrl等。

监听连续的按键事件实现秘笈开启

在很多游戏中，都有隐藏的秘笈，比如上上下下左左右右BABA这样的秘笈，那么怎么在网页监听事件，能够知道用户是按下了这个秘笈呢？（才不是要在隐藏什么奇怪的东西才用这个的>_<）演示地址（输入秘笈真的有惊喜！）：

实现的方法就是用一个数组来记录连续按键的状态，每次按键正确则匹配下一个，直到所有匹配成功，看下面代码：

// 上上下下左左右右BABA的键值const secretKey = ['up', 'up', 'down', 'down', 'left', 'left', 'right', 'right', 'b', 'a', 'b', 'a'];// 秘笈的键码const secretKeyCode = [38, 38, 40, 40, 37, 37, 39, 39, 66, 65, 66, 65];// 当前按键匹配的状态let secretKeyCodeStatus = new Array(secretKeyCode.length).fill(0);// 当前正确秘笈按键的索引// let correctCodeIndex = 0;const CORRECT_STATUS = 1;  // 表示正确匹配按键的状态document.onkeydown = function(event) {    // 查找第一个0的位置，即当前按键应该匹配的位置    let correctCodeIndex = secretKeyCodeStatus.lastIndexOf(CORRECT_STATUS);    correctCodeIndex = correctCodeIndex === -1 ? 0 : correctCodeIndex + 1;    // 如果所有的按键都正确，则返回    if (correctCodeIndex > secretKeyCode.length) {        alert('你成功打开了秘笈！通往哲♂学♂之路啊，我命令你开启吧！');        return true;    }    // 如果本次按键正确，则记录    if (event.keyCode === secretKeyCode[correctCodeIndex]) {        console.log('keyCode: ' + event.keyCode + ' code: ' + event.code + '  --correct,index:' + correctCodeIndex);        // 所有按键都正确则成功        if (correctCodeIndex + 1 === secretKeyCodeStatus.length) {            alert('你成功打开了秘笈！通往哲♂学♂之路啊，我命令你开启吧！');            // 重置状态            secretKeyCodeStatus = new Array(secretKeyCode.length).fill(0);            return true;        } else {            // 否则记录当前按键成功            secretKeyCodeStatus[correctCodeIndex] = CORRECT_STATUS;        }    } else {        console.log('keyCode: ' + event.keyCode + ' code: ' + event.code + '  --reset');        // 按键错误则重置        secretKeyCodeStatus = new Array(secretKeyCode.length).fill(0);    }};

模拟键盘和鼠标事件

上面我们说明了如何监听页面的按键和键盘事件，但是有的时候我们需要使用代码模拟按钮操作。

比如看到很多图片的时候，我们需要批量下载，这个时候可以打开控制台，写一段JS代码批量模拟下载步骤即可，而不用一个一个的手动点击，非常方便。

模拟鼠标点击

最简单的就是模拟点击了，我们只需要选中一个元素，然后执行click函数即可。

下面的代码实现在一个表格中，点击每一个图片。

const images = document.getElementById('content').getElementsByTagName('img');for (let image of images) {    images.click();}

如果要模拟鼠标双击，或者鼠标移动，则没有简单的函数可以调用。这个时候我们需要新建一个MouseEvent对象，并手动触发即可。

创建MouseEvent对象的语法为：const event = new MouseEvent(typeArg, mouseEventInit);

  • typeArg为鼠标事件类型，即上面的监听鼠标事件去掉on后的字符串，
    • click: 鼠标点击事件
    • dblclick: 鼠标双击事件
    • mousedown: 鼠标上的按钮被按下了
    • mouseup: 鼠标按下后松开时触发的事件
    • mousemove: 鼠标移动时触发的事件
    • mouseout: 鼠标离开监听该事件的元素或子元素时触发的事件
    • mouseover: 鼠标移动到监听该事件的元素或子元素时触发的事件
  • mouseEventInit为MouseEvent初始化的选项，指定鼠标事件的各种属性，可选值如下：
    • button: 整型，触发鼠标事件时按下的按钮编号
    • buttons: 整型，触发鼠标事件时弹起来的按钮编号
    • clientX: 鼠标指针在DOM内容区的X坐标
    • clientY：鼠标指针在DOM内容区的Y坐标
    • offsetX: 鼠标指针相对父节点填充边缘的X坐标
    • offsetY: 鼠标指针相对父节点填充边缘的Y坐标
    • screenX: 鼠标指针在全局屏幕的X坐标
    • screenY: 鼠标指针在全局屏幕的Y坐标
    • pageX: 鼠标指针在整个DOM内容（包括分页）的X坐标
    • pageY: 鼠标指针在整个DOM内容（包括分页）的Y坐标
    • altKey: 布尔值，表示此时的alt键是否也按下
    • ctrKey: 布尔值，表示此时的alt键是否也按下
    • shiftKey: 布尔值，表示此时的shift键是否也按下
    • metaKey: 布尔值，windows平台表示Window键是否同时按下，mac表示Command键是否同时按下

比如下面的示例在坐标200,200处触发一个鼠标双击事件：

// 创建一个event对象const createEvent = new MouseEvent('dblclick', {    clientX: 300,    clientY: 300,});// 触发该事件document.dispatchEvent(createEvent);

可以使用任意的Document对象的dispatchEvent方法触发一个事件，这些触发的事件和实际发生的事件一模一样。

模拟键盘输入事件

和模拟鼠标事件一样，不过这儿我们要创建一个KeyboardEvent事件对象。

创建KeyboardEvent对象的语法类似为：const event = new KeyboardEvent(typeArg, KeyboardEventInit);

  • typeArg为键盘输入事件类型，即上面的监听键盘输入事件去掉on后的字符串，
    • keydown: 键盘按下这个动作
    • keypress: 键盘被按住
    • keyup: 键盘被弹起
  • KeyboardEventInit为KeyboardEvent初始化的选项，指定键盘输入事件的各种属性，可选值如下：
    • type: 事件类型，如'keydown'或者'keyup'
    • key: 表示按下的键盘内容是什么即键值，按下字母'p'时，值为'p'
    • code: 表示键盘代码，按下字母'p'时，值为'KeyP'
    • keyCode(过时): 整数，表示键码，每个键都有唯一的键码，字母'p'的键码为80
    • altKey: 布尔值，表示此时的alt键是否也按下
    • ctrKey: 布尔值，表示此时的alt键是否也按下
    • shiftKey: 布尔值，表示此时的shift键是否也按下
    • metaKey: 布尔值，windows平台表示Window键是否同时按下，mac表示Command键是否同时按下
    • repeat: 布尔值，如果一个键一直被按着，则其值为true，表示重复

比如实现在按下字母'a'键时，自动按下'alt+ctrl+a'可以像下面实现。

// 监听按键事件document.onkeydown = function(event) {    console.log('keyCode: ' + event.keyCode + ' code: ' + event.code + ' alt:' + event.altKey);    if (event.keyCode === 65 || event.code === 'KeyA') {        // 如果按下的是a键，则新建一个a键按下的事件并触发        const createEvent = new KeyboardEvent('keydown', {            altKey: true,            shiftKey: true,            keyCode: 65,            code: 'KeyA'        });        document.dispatchEvent(createEvent);    }};

然后你就会发现上面的函数疯狂的输出A键被按下，哈哈哈！知道内存达到限制！

附录

最后附上键值和键码的对应关系对象，可以直接拷贝使用：

const keyCodes = {    0: 'That key has no keycode',    3: 'break',    8: 'backspace / delete',    9: 'tab',    12: 'clear',    13: 'enter',    16: 'shift',    17: 'ctrl',    18: 'alt',    19: 'pause/break',    20: 'caps lock',    21: 'hangul',    25: 'hanja',    27: 'escape',    28: 'conversion',    29: 'non-conversion',    32: 'spacebar',    33: 'page up',    34: 'page down',    35: 'end',    36: 'home',    37: 'left arrow',    38: 'up arrow',    39: 'right arrow',    40: 'down arrow',    41: 'select',    42: 'print',    43: 'execute',    44: 'Print Screen',    45: 'insert',    46: 'delete',    47: 'help',    48: '0',    49: '1',    50: '2',    51: '3',    52: '4',    53: '5',    54: '6',    55: '7',    56: '8',    57: '9',    58: ':',    59: 'semicolon (firefox), equals',    60: '<',    61: 'equals (firefox)',    63: 'ß',    64: '@ (firefox)',    65: 'a',    66: 'b',    67: 'c',    68: 'd',    69: 'e',    70: 'f',    71: 'g',    72: 'h',    73: 'i',    74: 'j',    75: 'k',    76: 'l',    77: 'm',    78: 'n',    79: 'o',    80: 'p',    81: 'q',    82: 'r',    83: 's',    84: 't',    85: 'u',    86: 'v',    87: 'w',    88: 'x',    89: 'y',    90: 'z',    91: 'Windows Key / Left ⌘ / Chromebook Search key',    92: 'right window key',    93: 'Windows Menu / Right ⌘',    95: 'sleep',    96: 'numpad 0',    97: 'numpad 1',    98: 'numpad 2',    99: 'numpad 3',    100: 'numpad 4',    101: 'numpad 5',    102: 'numpad 6',    103: 'numpad 7',    104: 'numpad 8',    105: 'numpad 9',    106: 'multiply',    107: 'add',    108: 'numpad period (firefox)',    109: 'subtract',    110: 'decimal point',    111: 'divide',    112: 'f1',    113: 'f2',    114: 'f3',    115: 'f4',    116: 'f5',    117: 'f6',    118: 'f7',    119: 'f8',    120: 'f9',    121: 'f10',    122: 'f11',    123: 'f12',    124: 'f13',    125: 'f14',    126: 'f15',    127: 'f16',    128: 'f17',    129: 'f18',    130: 'f19',    131: 'f20',    132: 'f21',    133: 'f22',    134: 'f23',    135: 'f24',    144: 'num lock',    145: 'scroll lock',    160: '^',    161: '!',    162: '؛ (arabic semicolon)',    163: '#',    164: '$',    165: 'ù',    166: 'page backward',    167: 'page forward',    168: 'refresh',    169: 'closing paren (AZERTY)',    170: '*',    171: '~ + * key',    172: 'home key',    173: 'minus (firefox), mute/unmute',    174: 'decrease volume level',    175: 'increase volume level',    176: 'next',    177: 'previous',    178: 'stop',    179: 'play/pause',    180: 'e-mail',    181: 'mute/unmute (firefox)',    182: 'decrease volume level (firefox)',    183: 'increase volume level (firefox)',    186: 'semi-colon / ñ',    187: 'equal sign',    188: 'comma',    189: 'dash',    190: 'period',    191: 'forward slash / ç',    192: 'grave accent / ñ / æ / ö',    193: '?, / or °',    194: 'numpad period (chrome)',    219: 'open bracket',    220: 'back slash',    221: 'close bracket / å',    222: 'single quote / ø / ä',    223: '`',    224: 'left or right ⌘ key (firefox)',    225: 'altgr',    226: '< /git >, left back slash',    230: 'GNOME Compose Key',    231: 'ç',    233: 'XF86Forward',    234: 'XF86Back',    235: 'non-conversion',    240: 'alphanumeric',    242: 'hiragana/katakana',    243: 'half-width/full-width',    244: 'kanji',    251: "unlock trackpad (Chrome/Edge)",    255: 'toggle touchpad',};// 压缩之后的const keyCodesMin={0:"That key has no keycode",3:"break",8:"backspace / delete",9:"tab",12:"clear",13:"enter",16:"shift",17:"ctrl",18:"alt",19:"pause/break",20:"caps lock",21:"hangul",25:"hanja",27:"escape",28:"conversion",29:"non-conversion",32:"spacebar",33:"page up",34:"page down",35:"end",36:"home",37:"left arrow",38:"up arrow",39:"right arrow",40:"down arrow",41:"select",42:"print",43:"execute",44:"Print Screen",45:"insert",46:"delete",47:"help",48:"0",49:"1",50:"2",51:"3",52:"4",53:"5",54:"6",55:"7",56:"8",57:"9",58:":",59:"semicolon (firefox), equals",60:"<",61:"equals (firefox)",63:"ß",64:"@ (firefox)",65:"a",66:"b",67:"c",68:"d",69:"e",70:"f",71:"g",72:"h",73:"i",74:"j",75:"k",76:"l",77:"m",78:"n",79:"o",80:"p",81:"q",82:"r",83:"s",84:"t",85:"u",86:"v",87:"w",88:"x",89:"y",90:"z",91:"Windows Key / Left ⌘ / Chromebook Search key",92:"right window key",93:"Windows Menu / Right ⌘",95:"sleep",96:"numpad 0",97:"numpad 1",98:"numpad 2",99:"numpad 3",100:"numpad 4",101:"numpad 5",102:"numpad 6",103:"numpad 7",104:"numpad 8",105:"numpad 9",106:"multiply",107:"add",108:"numpad period (firefox)",109:"subtract",110:"decimal point",111:"divide",112:"f1",113:"f2",114:"f3",115:"f4",116:"f5",117:"f6",118:"f7",119:"f8",120:"f9",121:"f10",122:"f11",123:"f12",124:"f13",125:"f14",126:"f15",127:"f16",128:"f17",129:"f18",130:"f19",131:"f20",132:"f21",133:"f22",134:"f23",135:"f24",144:"num lock",145:"scroll lock",160:"^",161:"!",162:"؛ (arabic semicolon)",163:"#",164:"$",165:"ù",166:"page backward",167:"page forward",168:"refresh",169:"closing paren (AZERTY)",170:"*",171:"~ + * key",172:"home key",173:"minus (firefox), mute/unmute",174:"decrease volume level",175:"increase volume level",176:"next",177:"previous",178:"stop",179:"play/pause",180:"e-mail",181:"mute/unmute (firefox)",182:"decrease volume level (firefox)",183:"increase volume level (firefox)",186:"semi-colon / ñ",187:"equal sign",188:"comma",189:"dash",190:"period",191:"forward slash / ç",192:"grave accent / ñ / æ / ö",193:"?, / or °",194:"numpad period (chrome)",219:"open bracket",220:"back slash",221:"close bracket / å",222:"single quote / ø / ä",223:"`",224:"left or right ⌘ key (firefox)",225:"altgr",226:"< /git >, left back slash",230:"GNOME Compose Key",231:"ç",233:"XF86Forward",234:"XF86Back",235:"non-conversion",240:"alphanumeric",242:"hiragana/katakana",243:"half-width/full-width",244:"kanji",251:"unlock trackpad (Chrome/Edge)",255:"toggle touchpad",};
posted on
2019-02-15 08:38 阅读(
...) 评论(
...)

转载于:https://www.cnblogs.com/lonelyxmas/p/10381580.html

你可能感兴趣的文章
.NET 获取类型中的属性
查看>>
ACM错误
查看>>
[LeetCode] Combination Sum II 组合之和之二
查看>>
面试被虐
查看>>
js+面向对象相关笔记（一）
查看>>
校外实习-第三周总结
查看>>
orcl数据库先决条件检查时失败
查看>>
设计模式 代理模式（Proxy Pattern）
查看>>
CodeUI Test：UIMap录制文件分析一
查看>>
.net的数据类型说明
查看>>
Hadoop简单介绍
查看>>
面向对象程序设计的思想的长处
查看>>
通过路径传值id进行页面判断
查看>>
获取文本的值
查看>>
spring security 参考 和 例子
查看>>
W3C-Web Service
查看>>
添加field部署
查看>>
CF-补题1
查看>>
SQL SERVER 读取 XML 数据
查看>>
URLClassLoader
查看>>
喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！-- 愿君每日到此一游！
当前时间: 2024-11-17 11:23:01   当前IP: 18.191.165.30   联系邮箱:javaeecc@qq.com     Copyright © 2020 - 2022 baihongyu.com 京ICP备2021015314号-2
强烈建议你试试无所不能的CHAT-GPT，快点击我
强烈建议你试试无所不能的CHAT-GPT，快点击我