需要检查Javascript中的特定按键

我很难理解下面的代码为什么工作，我想在这种情况下对“event”的回调会让我感到困惑。我有一些图像，当点击或记录相应的按键时，会播放声音。虽然一切正常，但我不明白为什么下面的代码使用“event”而不是只使用空函数并调用“this”（即：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
        });
    }
}

---

我的点击怎么能与“this”一起工作，但按键需要“event”？

这是因为，在您的例子中，

this

将表示事件绑定到的元素，而

event

将说明元素发生了什么。

this

指调用事件的对象。对于“单击”事件，这是一个按钮。对于“keydown”事件，这就是整个文档

因此，通过单击事件，

this.innerHTML

获取按钮上的文本。对于文档，

this.innerHTML

将一无所获，这不是您想要的

---

幸运的是，“keydown”事件的

event

参数存储了按下的键（在

key

属性中），因此您可以通过这种方式获取信息。

在旁注中，为了方便起见，它是否只将事件存储为字符串？例如，如果我的一个案例恰好是

1

，它会被存储为

“1”

还是

1

？该案例被存储为字符串，因此即使你按下一个数字，它也将始终是字符串。

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