javascript - 需要检查 Javascript 中的特定按键

Question

我很难理解为什么下面的代码可以工作，而且我认为在这种情况下对“事件”的回调会引起我的困惑。我有一些图像，当单击或记录相应的按键时，会播放声音。虽然一切正常，但我无法理解为什么下面的代码使用“事件”而不是仅使用空函数并调用“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
        });
    }
}

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

我的点击如何使用“this”但按键需要“event”？

Answer 1

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

因此，通过点击事件，this.innerHTML 获取按钮上的文本。对于文档，this.innerHTML 什么也得不到，这不是您想要的。

幸运的是，“keydown”事件的 event 参数存储了按下的键(在 key 属性中)，因此您可以通过这种方式获取信息。