将参数传递给`addEventListener`

Question

我试图创建一个适用于多选的函数。我创建一个视频游戏的选择屏幕应该像这样工作：https://oege.ie.hva.nl/~meestej005/eind/

我实现了，这是这段代码的办法：

function character1(){ 
for (var i = 0; i < sprite.length; i++){ 
    sprite[i].classList.remove('charSprite'); 
} 
sprite[0].classList.add('charSprite'); 
hadouken.play(); 
} 

我做了这个功能的4倍，每一个字符。他们被称为：

char1.addEventListener('click', character1); 

现在，我想创建一个函数，为每个字符做到这一点。这是我想出的：

function character(name, music){ 
for (var i = 0; i < sprite.length; i++){ 
    sprite[i].classList.remove('charSprite'); 
} 
name.classList.add('charSprite'); 
music.play(); 
} 

char1.addEventListener('click', character(charSprite1, hadouken)); 

不幸的是，这并不奏效。现在点击其中一个角色的结果是完全没有，甚至没有错误。所以我做错了什么，但不知道是什么。我想仅使用Javascript修复此问题。我希望你们能帮助我。谢谢。

Answer 1

addEventListener以函数作为其第二个参数。当您调用像character(charSprite1, hadouken)这样的函数时，您不再传递该函数引用（而是传递该函数的结果，即立即而不是当事件触发时）。我会建议使用闭合捕捉name和music争论，每一次从character返回一个函数：

function character(name, music) { 
    return function() { 
    for (var i = 0; i < sprite.length; i++) { 
     sprite[i].classList.remove('charSprite'); 
    } 
    name.classList.add('charSprite'); 
    music.play(); 
    } 
} 

char1.addEventListener('click', character(charSprite1, hadouken));