JavaScript: Информация О Нажатой Клавише 👇🏽

В данной статье рассмотрим, как получить информацию о нажатой клавише клавиатуры или кнопки мыши, а также как выполнять необходимые действия (нужный код) при нажатии определенных сочетаний клавиш или кнопок (правый/левый клик мыши).

Чтобы получить информацию, о том какая кнопка клавиатуры нажимается в данный момент, воспользуемся следующим кодом:

function keyPress(e) {
    let keyNum;
    if (window.event) {
        keyNum = window.event.keyCode;
    }
    else if (e) {
        keyNum = e.which;
    }
    console.log(keyNum);
}
document.onkeydown = keyPress;

Номер кнопки находится в переменной keyNum

Узнать keyCode кнопки можете здесь:

Выполнение кода в зависимости от нажатой клавиши

Давайте теперь будем выполнять необходимые действия в зависимости от нажатой клавиши

Для этой задачи воспользуемся оператором switch

В конструкции case укажите номер кнопки, для которой будет выполнен необходимый код.

document.onkeydown = function(e){
    switch (e.keyCode) {
        case 49:
            console.log('Нажата единица');
            break;
        case 50:
            console.log('Нажата двойка');
            break;
        case 32:
            console.log('Нажат пробел');
            break;
        case 9:
            console.log('Нажат tab');
            break;
        case 16:
            console.log('Нажат shift');
            break;
        default:
            console.log(e.keyCode);
    }
};

Вместо console.log выполняйте необходимые действия.

Если была нажата клавиша, которой нет в списке, то для неё можете выполнить другой код. Писать в default

Как отследить комбинации нажатых клавиш

Отследить нажатие CTRL, SHIFT и ALT можно также другими способами (данный способ необходим чтобы отследить комбинации)

• ctrlKey - CTRL
• altKey - ALT
• shiftKey - SHIFT

Например, отследить нажатие CTRL можно следующим образом:

document.addEventListener('keydown', function(e){
    if ( e.ctrlKey ) {
        console.log('Был нажат CTRL');
        document.getElementById('btnClick').textContent = 'CTRL';
    }
});

Используя всю ранее полученную информацию, определим нажатую комбинацию клавиш, например, CTRL + F5

document.addEventListener('keydown', function(e){
    e.preventDefault();

    if ( e.ctrlKey && event.key == 'F5' ) {
        console.log('Была нажата комбинация клавиш CTRL + F5');
    }
});

Как вы могли заметить, обращаться к клавишам в JavaScript можно несколькими способами. Например, следующие строки кода позволяют нам получить один и тот же результат:

Мы рассмотрели, как получить информацию о нажатой клавише на клавиатуре. Теперь давайте рассмотрим, как обработать события мыши.

Информация о нажатой кнопке мыши JavaScript

Рассмотрим, как определить какая кнопка мыши нажимается над объектом: левая кнопка, правая или дабл клик

Выполнение кода при клике левой кнопкой мыши

document.querySelector(selector).onclick = function(e) {
    if (e.which == 1) {
        console.log('Нажата левая кнопка мыши');
    }
}

Выполнение кода при клике правой кнопкой мыши

document.querySelector(selector).oncontextmenu = function(e) {
    e.preventDefault();
    console.log('Нажата правая кнопка мыши');
}

Выполнение кода при двойном клике по кнопке

document.querySelector(selector).ondblclick = function() {
    console.log('Двойное нажатие левой кнопки мыши');
}