如何使用 addEventListener？

Question

我遇到了 addEventListener 的问题。

var x = parseInt(document.getElementById("nb1").value);
var y = parseInt(document.getElementById("nb2").value);
document.getElementById("calculate").addEventListener("click", calculate(x, y));
function calculate(x, y) {
    document.getElementById("result").value = x + y;
}

当我执行这段代码时，函数计算被直接调用而无需我点击按钮"calculate"。我真的不明白为什么，你能帮忙吗？

Answer 1

使用像 function(){ calculate(x, y); } 这样的回调，您的代码将立即执行 calculate(x,y) 而不会等待事件触发。

    var x = parseInt(document.getElementById("nb1").value);
    var y = parseInt(document.getElementById("nb2").value);
    document.getElementById("calculate").addEventListener("click", function(){  calculate(x, y); });

function calculate(x, y) {

     document.getElementById("result").value = x + y;

}

Answer 2

在提供的代码段中，总计的值永远不会是预期值，因为您最初存储 input 字段的值，而不是在使用时单击 calculate 按钮。

要获取更新值，您需要在 click 事件发生时获取值。

另请注意，addEventListener 期望第二个参数是函数表达式。在您的情况下，您正在调用函数 calculate ，它将在执行特定代码行时执行。如果你想在函数表达式中传递参数，那么 -> function(){ calculate(x, y); }

试试这个：

document.getElementById("calculate").addEventListener("click", calculate);

function calculate() {
  var x = parseInt(document.getElementById("nb1").value);
  var y = parseInt(document.getElementById("nb2").value);
  document.getElementById("result").value = x + y;
}

<input type="text" id='nb1'>
<input type="text" id='nb2'>
<br>
<input type="text" readonly id='result' placeholder='Result'>
<br>
<button id='calculate'>Calculate</button>

Fiddle here

Answer 3

当您说 functionName(param1, param2) 时，它会调用该函数并 return 它的值。因此，当您将它分配给事件侦听器时，您就是在分配它的 return 值。如果你想在赋值时传递参数，你应该使用 bind.

注意： 这只会工作一次，因为您只为 x 和 y 赋值一次。 @Rayon Dabre 的回答是理想的方式。

var x = parseInt(document.getElementById("nb1").value);
var y = parseInt(document.getElementById("nb2").value);
document.getElementById("calculate").addEventListener("click", calculate.bind(event, x, y));


function calculate(x, y) {
  document.getElementById("result").value = x + y;
}

<input type="text" value="10" id="nb1" />
<input type="text" value="20" id="nb2" />
<button id="calculate">Calculate</button>
<input type="text" id="result" />

如何使用 addEventListener？

How to use addEventListener?

html

javascript

addeventlistener