如何处理来自多个同名按钮的事件答案

【问题标题】：How to handle event from multiple buttons of same name如何处理来自多个同名按钮的事件
【发布时间】：2015-06-15 20:05:13
【问题描述】：

我正在做一个小型练习程序，其中连续有 3 个白框。我的目标是（使用 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>

【问题讨论】：

你不能有多个元素具有相同的id。

标签： javascript html button event-handling elements

【解决方案1】：

您可以像这样使用this 引用：

<!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>

在 html 中的 ID 应该是唯一的。没有 2 个元素应该具有相同的 ID。 this 将引用调用者元素。

【讨论】：

非常感谢您的回复。这有效，它帮助我现在了解如何使用“this”将当前元素传递给函数。
@NJDave 没问题，很高兴我能帮上忙！

【解决方案2】：

我建议使用 jQuery 并将 ID 更改为 CLALL。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!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">     
    $(document).ready(function(){
      $(".btn").hover(function(){
        $(this).css("background-color","red");
      },function(){
        $(this).css("background-color","yellow");
      });
    });
    </script>
    <link rel="stylesheet" href="css/app5.css">
  </head>
  <body>

    <input type="button" value="" class="btn"/>

    <input type="button" value="" class="btn"/>

    <input type="button" value="" class="btn"/>

  </body>
</html>

【讨论】：

感谢您的回复。当我开始学习 jQuery 时，我会参考这个。

【解决方案3】：

根据 HTML5 规范，id 属性在文档中必须是唯一的。 http://www.w3.org/TR/html5/dom.html#the-id-attribute

如果您只是将 id 属性更改为类属性，您可以使用以下答案并稍微调整一下以执行您想要的操作（将事件从单击更改为鼠标悬停等）。

JavaScript: Event listener for multiple buttons with same class name

【讨论】：