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是指调用事件的对象。对于“ click”事件，这是一个按钮。对于整个文档的“ keydown”事件。

因此，通过单击事件，this.innerHTML获取按钮上的文本。对于文档，this.innerHTML不会得到任何东西，这不是您想要的。

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

Answer 2

那是因为，在您的情况下，this表示事件绑定到的元素，而event则表示事件发生了什么。

需要检查Javascript中的特定按键

2 个答案: