如何使用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));