this.innerHTML 和 function（event） 与 eventListener 一起使用时的区别

问：

这是我第一次在这里发帖，所以如果这有点令人困惑，请原谅我:)

我是 Javascript 的新手，目前正在学习 Dr.Yu 的 Udemy Web 开发人员课程。 我很难理解 和 之间的区别。在我的理解中，事件将利用触发事件侦听器的事件，而这将为我提供触发事件的对象的身份。我觉得就我而言，它们都给了我触发事件的事物的身份，所以我不明白为什么我不能用于检测按下的按钮。 以下是我的代码：this.innerHTMLfunction(event)function (event)

// Detecting pressed button
for (var i = 0; i < document.querySelectorAll(".drum").length; i++) {
    document.querySelectorAll(".drum")[i].addEventListener("click", function(event) {
        makeSound(event.key);
    });
}
//detecting pressed keyboard 
document.addEventListener("keydown", function(event) {
    makeSound(event.key);
});

function makeSound(key) {
    switch (key) {
        case "w":
            var audio = new Audio('sounds/tom-1.mp3');
            audio.play();
            break;
        case "a":
            var audio = new Audio('sounds/tom-2.mp3');
            audio.play();
            break;
        case "s":
            var audio = new Audio('sounds/tom-3.mp3');
            audio.play();
            break;

        case "d":
            var audio = new Audio('sounds/tom-4.mp3');
            audio.play();
            break;


        case "j":
            var audio = new Audio('sounds/crash.mp3');
            audio.play();
            break;

        case "k":
            var audio = new Audio('sounds/snare.mp3');
            audio.play();
            break;

        case "l":
            var audio = new Audio('sounds/kick-bass.mp3');
            audio.play();
            break;

        default:
            console.log(buttenInnerHTML);

    }
}

检测按下按钮的正确代码如下：

检测按下的按钮 为什么我们不能也使用 function（event） 进行点击？

for (var i=0; i<document.querySelectorAll(".drum").length;i++){
document.querySelectorAll(".drum")[i].addEventListener("click",function(){
var buttenInnerHTML =this.innerHTML;
makeSound(buttenInnerHTML);

}); }

我试过这段代码，但它不能正常工作。

//Detecting pressed button 
for (var i=0; i<document.querySelectorAll(".drum").length;i++){
    document.querySelectorAll(".drum")[i].addEventListener("click",function(event){
    makeSound(event.key);});

    function makeSound (key){
    switch (key) {
    case "w":
        var audio = new Audio('sounds/tom-1.mp3');
        audio.play();
        break;
    case "a":
        var audio = new Audio('sounds/tom-2.mp3');
        audio.play();
        break;
    case "s":
        var audio = new Audio('sounds/tom-3.mp3');
        audio.play();
        break;
    
    case "d":
            var audio = new Audio('sounds/tom-4.mp3');
            audio.play();
            break;
        
            
    case "j":
            var audio = new Audio('sounds/crash.mp3');
            audio.play();
            break;
        
    case "k":
                var audio = new Audio('sounds/snare.mp3');
                audio.play();
                break;
           
    case "l":
                    var audio = new Audio('sounds/kick-bass.mp3');
                    audio.play();
                    break;

                default:console.log(buttenInnerHTML);
                
    }

}