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

我试图理解如何使用循环和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);

  }

var myspan=document.getElementById（“测试”+i）；
对于（var i=0；i

test

不存在，而且

myspan

不是数组，事实上没有意义。非常感谢！从昨晚开始我就一直在做这件事，但没能成功。真不敢相信你只花了几分钟就完成了。

 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);

}

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