如何在javascript中更简单地处理事件？

作为一名javascript初学者，我遵循以下原则。在该页的顶部解释了简单表单和事件处理程序的使用，而在该页的底部给出了创建简单计算器的练习

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

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

---

请看这行代码：

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

button1.onclick = pressingNumber(1);

它有什么作用？它调用函数

document.getElementById

，并将其返回值赋给

按钮1

现在看这行代码：

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

button1.onclick = pressingNumber(1);

这有什么用？它调用函数

按数字

并将其返回值分配给

按钮1。再次单击

那么，

按数字（1）

返回什么？嗯，没有，因为

pressingNumber

没有

return

语句

因此，您正在为

按钮1分配nothing。。。为什么它什么都不做

您将学到的一点是，如果您只是大声阅读代码，一步一步地解释代码的功能，您将很快解决自己的问题。我桌上有一只橡皮鸭，我可以向它解释事情，大多数时候，这就是我解决问题所需要的

在这种情况下，您希望继续使用原始代码。它分配函数本身，而不调用它。只有当点击触发时才会调用它。
看看这行代码：

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

button1.onclick = pressingNumber(1);

它有什么作用？它调用函数
document.getElementById
，并将其返回值赋给
按钮1

现在看这行代码：

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

button1.onclick = pressingNumber(1);

这有什么用？它调用函数
按数字
并将其返回值分配给
按钮1。再次单击

那么，
按数字（1）
返回什么？嗯，没有，因为
pressingNumber
没有
return
语句

因此，您正在为
按钮1分配nothing。。。为什么它什么都不做

您将学到的一点是，如果您只是大声阅读代码，一步一步地解释代码的功能，您将很快解决自己的问题。我桌上有一只橡皮鸭，我可以向它解释事情，大多数时候，这就是我解决问题所需要的

在这种情况下，您希望继续使用原始代码。它分配函数本身，而不调用它。只有在单击触发器时才会调用它。
您可以使用

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

你可以用

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

请注意，onclick事件始终带有指向触发事件的div的链接。您应该利用它来捕获单击的按钮。在下面的函数中，e将引用clickevent。e、 target将引用div，即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)

请注意，onclick事件始终带有指向触发事件的div的链接。您应该利用它来捕获单击的按钮。在下面的函数中，e将引用clickevent。e、 target将引用div，即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)

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

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


功能按钮编号（数字）{
document.getElementById（“计算输出”）.innerHTML=number；
}  

原始代码中的问题是，您在必须分配函数的位置使用
（）
调用函数
 在这种情况下，这是最短的方法

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


功能按钮编号（数字）{
document.getElementById（“计算输出”）.innerHTML=number；
}  

原始代码中的问题是，您在必须分配函数的位置使用
（）
调用函数
 他可以直接从类似html的函数（值）传递值，而不是编写单独的函数，对吗？他可以直接从类似html的函数（值）传递值，而不是编写单独的函数，对吗？