Необходимо проверить наличие конкретных нажатий клавиш в Javascript

Question

У меня возникают проблемы с пониманием того, почему код ниже работает, и я думаю, что мое замешательство возникает с обратным вызовом «события» в этом случае. У меня есть несколько изображений, которые при нажатии или соответствующем нажатии кнопки записывается звук. Хотя все работает, я не могу понять, почему приведенный ниже код использует «событие» вместо того, чтобы просто использовать пустую функцию и вызывать «это» (т.е. this.key)

Я пытался использовать метод "this", но он не работал. Немного исследований, и я обнаружил, что мне пришлось использовать «событие» в моей функции.

function addListenerToAllDrums() {
    //store buttons in array
    var buttonArray = document.querySelectorAll(".drum");
    //iterate thru each btn
    for (var i = 0; i < buttonArray.length; i++) {
        //add a listener each iter.
        buttonArray[i].addEventListener("click", function () {
            //store html of button (ie: `w`) to variable
            var buttonInnerHTML = this.innerHTML;
            //the stored html is passed to the checkSound function
            checkSound(buttonInnerHTML); //ie: `w` = case w
        });
    }
}

//check for keypress
document.addEventListener(`keydown`, function (event) {
    //store the key in a variable
    var pressedKey = event.key
    //passes pressedKey as string (ie: `w`) to checkSound(`w`)
    checkSound(pressedKey);
});

//make a sound dependant on button press or keypress functions
function checkSound(input) {
    //Create Switch Statement based on keypress/button click input
    switch (input) {
        case `w`:
            var snare = new Audio('sounds/snare.mp3');
            snare.play();
        case `a`:
            var tom1 = new Audio('sounds/tom-1.mp3');
            tom1.play();
            break;
        case `s`:
            var tom3 = new Audio('sounds/tom-3.mp3');
            tom3.play();
            break;
        case `d`:
            var kick = new Audio('sounds/kick-bass.mp3');
            kick.play();
            break;
        case `j`:
            var tom4 = new Audio('sounds/tom-4.mp3');
            tom4.play();
            break;
        case 'k':
            var tom2 = new Audio('sounds/tom-2.mp3');
            tom2.play();
            break;
        case `l`:
            var crash = new Audio('sounds/crash.mp3');
            crash.play();
            break;


        default:
            console.log(this.innerHTML)
    }
}



addListenerToAllDrums();

Как мои клики могут работать с "этим", но нажатие клавиш требует "события"?

Answer 1

this относится к объекту, для которого вызывается событие.Для события "click" это кнопка.Для события «keydown» это весь документ.

Итак, с событием click, this.innerHTML получает текст на кнопках.Для документа this.innerHTML не получит ничего, что вам не нужно.

К счастью, аргумент event для события "keydown" хранит нажатую клавишу (в свойстве key).), так что вы можете получить информацию таким образом.

Answer 2

Это потому, что в вашем случае this будет представлять элемент, к которому привязано событие, а event будет сообщать, что произошло с элементом.