Question

基本问题我知道，但我无法理解某些事情。我有一个模拟掷骰子的函数，面数作为参数：

function throw(faces){
//My function here
}

然后我有按钮来模拟那些具有不同数字的发布，我希望它们在点击时启动throw：

document.getElementById("4").addEventListener("click",throw(4));
document.getElementById("6").addEventListener("click",throw(6));

等

但是当我启动CodePen（here）时，函数会自动启动（但使用正确的参数），然后我就无法点击按钮。我可以，但没有任何反应。

我做错了什么？我觉得这是一个非常基本的东西，但我似乎无法得到它。我已经看到，如果您将throw代替throw()，则该功能不会自动启动，但我该如何更改参数呢？

Answer 1

throw(4)自动执行/调用方法，因为您正在使用()调用函数/方法。如果您希望按钮上的事件侦听器在单击时调用throw(4)，请使用以下内容：

document.getElementById("4").addEventListener("click", function(){
   throw(4);
});

或

document.getElementById("4").addEventListener("click", throw);
function throw (){
  console.log(event.target.id); //event.target.id will give the id of the element clicked
  // your rest of the code here
}

Answer 2

您的throw函数需要将函数返回到addEventListener。例如：

function throw ( faces ) {
    return function () {
        return Math.floor( Math.random() * faces );
    }
}

Answer 3

您可以使用bind返回带有预设this关键字和参数的新功能（在这种情况下为null）：

function throw(faces){
  // My function here
}

document.getElementById("4").addEventListener("click", throw.bind(null, 4));
document.getElementById("6").addEventListener("click", throw.bind(null, 6));

或者定义一个执行throw的新函数：

document.getElementById("4").addEventListener("click", function() {
    throw(4);
});
document.getElementById("6").addEventListener("click", function() {
    throw(6);
});

addEventListener＆＃34;激活＆＃34;自动

3 个答案: