Javascript 如何处理来自多个同名按钮的事件
我正在进行一个小的练习项目，在这个项目中，我有三个白色方框排成一行。我的目标是（使用Javascript）让任何一个框在鼠标移到框上时从白色变为红色，然后在鼠标离开框时变为黄色。下面的代码适用于初始框，但不适用于其他两个框。当我把鼠标放在其他框上时，它不会改变它们，但会改变初始框的颜色。我看过类似的问题，但大多数问题都涉及jquery，我没有使用它。我做了一些研究，可能的解决方案可能涉及使用addEventListener或使用“this”。我不想给按钮id赋予不同的名称，并基于它们编写额外的过程——这将是低效的。我知道一定有更有效的方法。任何建议都将不胜感激Javascript 如何处理来自多个同名按钮的事件,javascript,html,button,event-handling,elements,Javascript,Html,Button,Event Handling,Elements,我正在进行一个小的练习项目，在这个项目中，我有三个白色方框排成一行。我的目标是（使用Javascript）让任何一个框在鼠标移到框上时从白色变为红色，然后在鼠标离开框时变为黄色。下面的代码适用于初始框，但不适用于其他两个框。当我把鼠标放在其他框上时，它不会改变它们，但会改变初始框的颜色。我看过类似的问题，但大多数问题都涉及jquery，我没有使用它。我做了一些研究，可能的解决方案可能涉及使用addEventListener或使用“this”。我不想给按钮id赋予不同的名称，并基于它们编写额外的过
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Whiteboxes 5</title>
<script type="text/javascript">
function changeColorOnMouseOver()
{
var control=document.getElementById("btn");
control.style.background='red';
}
function changeColorOnMouseOut()
{
var control=document.getElementById("btn");
control.style.background='yellow';
}
</script>
<link rel="stylesheet" href="css/app5.css">
</head>
<body>
<input type="button" value="" id="btn"
onmouseover="changeColorOnMouseOver()"
onmouseout="changeColorOnMouseOut()"/>
<input type="button" value="" id="btn"
onmouseover="changeColorOnMouseOver()"
onmouseout="changeColorOnMouseOut()"/>
<input type="button" value="" id="btn"
onmouseover="changeColorOnMouseOver()"
onmouseout="changeColorOnMouseOut()"/>
</body>
</html>
白盒5
函数changeColorOnMouseOver（）
{
var control=document.getElementById（“btn”）；
control.style.background='red'；
}
函数changeColorOnMouseOut（）
{
var control=document.getElementById（“btn”）；
control.style.background='yellow'；
}
此<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Whiteboxes 5</title>
<script type="text/javascript">
function changeColorOnMouseOver(control)
{
control.style.background='red';
}
function changeColorOnMouseOut(control)
{
control.style.background='yellow';
}
</script>
<link rel="stylesheet" href="css/app5.css">
</head>
<body>
<input type="button" value="" id="btn1"
onmouseover="changeColorOnMouseOver(this)"
onmouseout="changeColorOnMouseOut(this)"/>
<input type="button" value="" id="btn2"
onmouseover="changeColorOnMouseOver(this)"
onmouseout="changeColorOnMouseOut(this)"/>
<input type="button" value="" id="btn3"
onmouseover="changeColorOnMouseOver(this)"
onmouseout="changeColorOnMouseOut(this)"/>
</body>
</html>
白盒5
功能转换颜色移动切换（控制）
{
control.style.background='red'；
}
功能更改ColorOnMouseout（控制）
{
control.style.background='yellow'；
}
在html中，ID应该是唯一的。没有两个元素应该具有相同的ID。
此
白盒5
$（文档）.ready（函数（）{
$（“.btn”）.hover（函数（）{
$（this.css（“背景色”、“红色”）；
}，函数（）{
$（this.css（“背景色”、“黄色”）；
});
});
不能有多个元素具有相同的
id