[英]How to handle events simpler in javascript?
As a beginner with javascript, I am following this tutorial . 作为javascript的初学者,我正在关注本教程 。 At the top of that page simple forms and the use of an event handler is explained, while at the bottom of the page an exercise to create a simple calculator is given calculator.html .
在该页面的顶部解释了简单的形式和事件处理程序的用法,而在页面的底部给出了创建简单计算器的练习Calculator.html 。
I have come up with a very cumbersome solution to handle events when a number or operation is pressed. 我想出了一个非常麻烦的解决方案来处理按下数字或操作时的事件。 Here is what I have implemented:
这是我已经实现的:
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;
Is this the way to go? 这是要走的路吗? Is there a simpler way?
有没有更简单的方法? I tried the following syntax which does not seem to work:
我尝试了以下似乎无效的语法:
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);
Look at this line of code: 查看以下代码行:
button1 = document.getElementById("button-1");
What does it do? 它有什么作用? It calls the function
document.getElementById
and assigns its return value to button1
. 它调用函数
document.getElementById
并将其返回值分配给button1
。
Now look at this line of code: 现在看一下这行代码:
button1.onclick = pressingNumber(1);
What does this do? 这是做什么的? It calls the function
pressingNumber
and assigns its return value to button1.onclick
. 它调用函数
pressingNumber
并将其返回值分配给button1.onclick
。
So what does pressingNumber(1)
return? 那么,
pressingNumber(1)
返回什么? Well, nothing, since pressingNumber
has no return
statement. 好吧,什么都没有,因为
pressingNumber
没有return
语句。
So you're assigning nothing to button1.onclick
, and then wondering... why is it doing nothing? 因此,您没有为
button1.onclick
分配任何 button1.onclick
,然后想知道...为什么它什么也不做? ;) ;)
One of the things you'll learn is that if you just read your code aloud, explaining what it does step by step, you'll quickly solve your own problems. 您将学到的一件事是,只要大声阅读代码,一步一步地解释代码的作用,就可以快速解决自己的问题。 I have a rubber duck on my desk that I explain things to, and most of the time that's all I need to solve a problem.
我的桌子上放着一只橡皮鸭,向我解释事情,而在大多数情况下,这是解决问题所需要的。
In this case, you want to stick with the original code. 在这种情况下,您要坚持原始代码。 It assigns the function itself , it doesn't call it.
它分配函数本身 ,但不调用它。 It is only called when
onclick
triggers. 仅在
onclick
触发时调用。
Note that onclick events always come with a link to the div that triggered the event. 请注意,onclick事件始终带有指向触发该事件的div的链接。 You should make use of that to capture which button was clicked.
您应该利用它来捕获单击了哪个按钮。 e in below function will refer to the clickevent.
以下函数中的e将引用clickevent。 e.target will refer to the div, e.target.id will refer to the id of said div.
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);
}
You could then attach said function to your div like so. 然后,您可以像这样将上述函数附加到div上。
document.getElementById(buttonDivName).addEventListener("click", buttonClicked)
In this particular case, this is your shortest method 在这种情况下,这是您最短的方法
<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;
}
The problem in your original code was that you are calling a function with ()
in a place where you have to assign a function. 原始代码中的问题在于,您必须在必须分配函数的地方使用
()
调用函数。
You can use 您可以使用
button1.addEventListener("click", pressingNumber(1));
button2.addEventListener("click", pressingNumber(2));
button3.addEventListener("click", pressingNumber(3));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.