如何使用javascript处理事件？

Question

作为javascript的初学者，我正在关注本教程 。 在该页面的顶部解释了简单的形式和事件处理程序的用法，而在页面的底部给出了创建简单计算器的练习Calculator.html 。

我想出了一个非常麻烦的解决方案来处理按下数字或操作时的事件。 这是我已经实现的：

function pressingNumber(number) {
    document.getElementById("calc-output").innerHTML = number;
}

function press1() {pressingNumber(1);}
function press2() {pressingNumber(2);}
function press3() {pressingNumber(3);}
var button1 = document.getElementById("button-1");
var button2 = document.getElementById("button-2");
var button3 = document.getElementById("button-3");
button1.onclick = press1;    
button2.onclick = press2;
button3.onclick = press3;

这是要走的路吗？ 有没有更简单的方法？ 我尝试了以下似乎无效的语法：

function pressingNumber(number) {
    document.getElementById("calc-output").innerHTML = number;
}

var button1 = document.getElementById("button-1");
var button2 = document.getElementById("button-2");
var button3 = document.getElementById("button-3");
button1.onclick = pressingNumber(1);    
button2.onclick = pressingNumber(2);
button3.onclick = pressingNumber(3);

Answer 1

查看以下代码行：

button1 = document.getElementById("button-1");

它有什么作用？ 它调用函数document.getElementById并将其返回值分配给button1 。

现在看一下这行代码：

button1.onclick = pressingNumber(1);

这是做什么的？ 它调用函数 pressingNumber 并将其返回值分配给button1.onclick 。

那么， pressingNumber(1)返回什么？ 好吧，什么都没有，因为pressingNumber没有return语句。

因此，您没有为button1.onclick分配任何 button1.onclick ，然后想知道...为什么它什么也不做？ ;）

您将学到的一件事是，只要大声阅读代码，一步一步地解释代码的作用，就可以快速解决自己的问题。 我的桌子上放着一只橡皮鸭，向我解释事情，而在大多数情况下，这是解决问题所需要的。

在这种情况下，您要坚持原始代码。 它分配函数本身 ，但不调用它。 仅在onclick触发时调用。

Answer 2

请注意，onclick事件始终带有指向触发该事件的div的链接。 您应该利用它来捕获单击了哪个按钮。 以下函数中的e将引用clickevent。 e.target将引用div，e.target.id将引用所述div的ID。

function buttonClicked(e){
    console.log(e.target.id);
    console.log('clicked in',document.getElementById(e.target.id).parentNode.id);
}

然后，您可以像这样将上述函数附加到div上。

document.getElementById(buttonDivName).addEventListener("click", buttonClicked)

Answer 3

在这种情况下，这是您最短的方法

<input type="button" value="1" onclick="pressNumber(1)">
<input type="button" value="2" onclick="pressNumber(2)">

function pressNumber(number) {
    document.getElementById("calc-output").innerHTML = number;
}  

原始代码中的问题在于，您必须在必须分配函数的地方使用()调用函数。

Answer 4

您可以使用

button1.addEventListener("click", pressingNumber(1));
button2.addEventListener("click", pressingNumber(2));
button3.addEventListener("click", pressingNumber(3));