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而不单击按钮＆＃34;计算＆＃34;。我真的不明白为什么，你能帮忙吗？

Answer 1

在提供的代码段中，由于您在点击input按钮时使用的calculate字段值不存储，因此总值将永远不会是预期值。

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

另请注意，addEventListener期望第二个参数是函数表达式。在您的情况下，您正在调用函数calculate，该函数将在执行特定代码行时执行。如果你想在函数表达式中传递参数，那么 - ＆gt; 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 2

使用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 3

当您说functionName(param1, param2)时，它会调用该函数并返回其值。因此，当您将其分配给事件侦听器时，您将分配其返回值。如果要在分配时传递参数，则应使用bind。

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

如何使用addEventListener？

3 个答案: