將參數傳遞給`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));