为什么此功能立即执行[重复]

Question

const ATTACK_VALUE = 10;
const STRONG_ATTACK_VALUE = 17;
const MONSTER_ATTACK_VALUE = 14;

function attackHandler( typeOfAttack ) {
    const damageOne = typeOfAttack
    const damageTwo = dealMonsterDamage(damageOne)

    currentMonsterHealth -= damageTwo;
    playerDamage = dealPlayerDamage(MONSTER_ATTACK_VALUE);
    currentPlayerHealth -= playerDamage;

    if ( currentMonsterHealth <= 0 && currentPlayerHealth > 0 ) {
        alert('You won!');
    } else if ( currentPlayerHealth <= 0 && currentMonsterHealth > 0 ) {
        alert('You lost!');
    } else if ( currentPlayerHealth <= 0 && currentMonsterHealth <= 0 ) {
        alert('You have a draw');
    }        
}
        
        
attackBtn.addEventListener( 'click', attackHandler( ATTACK_VALUE ) );
strongAttackBtn.addEventListener( 'click', attackHandler( STRONG_ATTACK_VALUE ) );

其他代码

function dealMonsterDamage(damage) {
    const dealtDamage = Math.random() * damage;
    monsterHealthBar.value = +monsterHealthBar.value - dealtDamage;

    return dealtDamage;
}

我刚开始学习编码并一直在学习一个教程，我想我会进行实验，我想知道为什么这不起作用。它立即执行，之后的按钮不起作用

Answer 1

您必须将函数调用更改为以下内容：

attackBtn.addEventListener(
    'click', 
    function() {
        attackHandler(ATTACK_VALUE);
    }
);

strongAttackBtn.addEventListener(
    'click', 
    function() { 
        attackHandler(STRONG_ATTACK_VALUE); 
    }
);

addEventListener 第二个参数是一个回调。一旦引发事件，就会执行回调。

那么回调就是调用你想要的函数了。

更新：

由于与 StackOverflow 其他成员的争论，我删除了对箭头函数的引用作为回调。

他们是对的。如果您不是经验丰富的开发人员，这可能不是一个好习惯。

[....] 部分答案已删除