如何使用 for 循环和 document.getElementById 创建事件？

Question

我试图了解如何将循环和 document.getElementtById 一起使用，以在具有更改 id 的多个跨度上创建鼠标悬停事件。 我应该使用 document.getElementByTagName 而不是循环（仅使用“span”标签）吗？

这是html：

<span id="test1">really</span>
<span id="test2">really</span>
<span id="test3">really</span>
<span id="test4">bad</span>

这是我的javaScript：

  var myspan = document.getElementById("test" + i);
  for (var i = 0; i < myspan.length; i++) {

  test.addEventListener("mouseenter", function( event ) {   

    event.target.style.color = "purple";

    setTimeout(function() {
      event.target.style.color = "";
    }, 5000);
  }, false);

  }

Answer 1

 var myspan = document.getElementsByTagName("span");
  for (var i = 0; i < myspan.length; i++) {    
      myspan[i].addEventListener("mouseenter", function(event) {    
      this.style.color = "green";   

       setTimeout(function() {
          this.style.color = "";
       }.bind(this), 1000);    
  }, false);

}

在上面的代码段中，我更改了您的代码。 我个人更喜欢使用 css，或者下面的代码

[].forEach.call(document.querySelectorAll("span"), function(elem) {
    elem.onmouseover = function() {
        elem.style.color = "green";
        setTimeout(function() {
            elem.style.color = "";
        }, 1000)
    }
});