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

Question

我正在做一个小练习程序，其中有 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>

Answer 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 将引用调用者元素。

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

Answer 3

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

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

JavaScript: Event listener for multiple buttons with same class name

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

How to handle event from multiple buttons of same name

html

javascript

button

elements

event-handling