如何處理簡單的JavaScript事件？

作爲JavaScript的初級用戶，我在關注this tutorial。在該頁面的頂部，解釋了簡單的表單和事件處理程序的使用，而在頁面的底部，創建一個簡單的計算器的練習被給出calculator.html。如何處理簡單的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);

來源

2015-10-14 Alex

在這種特殊情況下，這是你最短的方法

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

的問題在你原來的代碼是，你在哪裏，你必須指定功能的地方調用函數與()。

來源

2015-10-14 10:11:03

看這行代碼：

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

它有什麼作用？它調用函數document.getElementById並將其返回值分配給button1。

現在看這行代碼：

button1.onclick = pressingNumber(1);

這是什麼呢？它調用函數pressingNumber和分配其返回值到button1.onclick。

那麼pressingNumber(1)返回什麼？那麼沒什麼，因爲pressingNumber沒有return聲明。

所以你指定沒有到button1.onclick，然後想知道......爲什麼它什麼都不做？ ;）

你會學到的一件事是，如果你只是大聲朗讀你的代碼，一步一步地解釋它的功能，你很快就能解決你自己的問題。我的辦公桌上有一個橡皮鴨，我可以解釋一些事情，而大部分時間都是我需要解決的一個問題。

在這種情況下，你想堅持原來的代碼。它分配函數本身，它不會調用它。只有在觸發onclick時纔會調用它。

來源

2015-10-14 10:01:41

他可以直接從html中傳遞值（如函數（值）），而不是編寫單獨的函數，對嗎？ – Arun

您可以使用

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

來源

2015-10-14 10:05:18 amitguptageek

注意的onclick事件總是有一個鏈接，觸發事件的股利。你應該利用它來捕獲哪個按鈕被點擊。 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)

來源

2015-10-14 10:07:24 WouldBeNerd

如何處理簡單的JavaScript事件？

回答

相關問題