JavaScript鍵盤鼠標事件處理

時間 2019-11-13

原文原文鏈接

監聽鍵盤鼠標事件

監聽某個按鍵事件

當鍵盤上的某個鍵被按下時，會依次觸發一次下面的事件：javascript

onkeydown: 鍵盤按下這個動做（按下鍵盤）
onkeypress: 鍵盤被按住（一直按着鍵盤不動）
onkeyup: 鍵盤被彈起（鬆開鍵盤）

經過監聽keydown事件既能夠知道鍵盤被按下：html

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事件對象，其中包含按鍵相關的一些屬性。其中：java

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等鍵是否同時按下。git

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對象類型：chrome

onclick: 鼠標點擊事件
ondblclick: 鼠標雙擊事件
onmousedown: 鼠標上的按鈕被按下了
onmouseup: 鼠標按下後鬆開時觸發的事件
onmousemove: 鼠標移動時觸發的事件
onmouseout: 鼠標離開監聽該事件的元素或子元素時觸發的事件
onmouseover: 鼠標移動到監聽該事件的元素或子元素時觸發的事件
onmousewheel: 鼠標滾輪事件，通常使用onscroll事件

MouseEvent對象中包含下面比較有用的屬性：windows

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這樣的祕笈，那麼怎麼在網頁監聽事件，可以知道用戶是按下了這個祕笈呢？（纔不是要在隱藏什麼奇怪的東西才用這個的>_<）演示地址（輸入祕笈真的有驚喜！）：http://asset.uusama.com/example/keycode.htmlide

實現的方法就是用一個數組來記錄連續按鍵的狀態，每次按鍵正確則匹配下一個，直到全部匹配成功，看下面代碼：函數

// 上上下下左左右右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);
    }
};

模擬鍵盤和鼠標事件

上面咱們說明了如何監聽頁面的按鍵和鍵盤事件，可是有的時候咱們須要使用代碼模擬按鈕操做。spa

好比看到不少圖片的時候，咱們須要批量下載，這個時候能夠打開控制檯，寫一段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",};

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。