将鼠标事件附加到锚点：JavaScript

Question

我正在尝试将onmouseover / out事件附加到页面上的所有锚标签上（想法是在onmouseover上加下标签并在onmouseout上将其删除）。

我做了下面的代码。 它将事件附加到所有锚点，但在任何锚点的onmouseover上都附加事件，它始终仅对页面中的最后一个锚点加下划线。

任何想法，可能有什么问题吗？

window.onload = function () {

    var elArray = document.getElementsByTagName("a");
    if (elArray != null && elArray.length > 0) {
        for (var count = 0; count < elArray.length; count++) {
            var el = elArray[count];
            if (el.addEventListener) {
                el.addEventListener("mouseover", function () {
                    el.style.textDecoration = 'underline'
                }, false);
                el.addEventListener("mouseout", function () {
                    el.style.textDecoration = 'none'
                }, false);
            } else {
                el.attachEvent('onmouseover', function () {
                    el.style.textDecoration = 'underline'
                });
                el.attachEvent('onmouseout', function () {
                    el.style.textDecoration = 'none'
                });
            }

        } //for
    } //if
}; //end of window.onload

Answer 1

您可以使用简单的CSS来做到这一点：

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

当CSS可以完成时，请不要使用javascript麻烦浏览器。

Answer 2

这是由于范围问题； el的作用域不是for循环的每次迭代，它的作用域是整个函数，因此，一旦for循环完成执行， el引用最后一个元素。 由于事件处理函数中的el是相同的变量，因此它们只会影响页面上的最后一个<a>元素。

但是，无需为此使用JavaScript，在相当长的一段时间内使用CSS可以实现同样的效果。 以下应该工作：

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

如果您绝对想使用JavaScript，则需要创建一个闭包以使用立即调用的函数表达式来修改el的范围：

window.onload = function () {

    var elArray = document.getElementsByTagName("a");
    if (elArray != null && elArray.length > 0) {
        for (var count = 0; count < elArray.length; count++) {
            var el = elArray[count];
            (function(el) {
            // el in here is different to el outside since the parameter shadows it
            // you could give them different names - or not declare an el variable outside - to make the difference clearer
            if (el.addEventListener) {
                el.addEventListener("mouseover", function () {
                    el.style.textDecoration = 'underline'
                }, false);
                el.addEventListener("mouseout", function () {
                    el.style.textDecoration = 'none'
                }, false);
            } else {
                el.attachEvent('onmouseover', function () {
                    el.style.textDecoration = 'underline'
                });
                el.attachEvent('onmouseout', function () {
                    el.style.textDecoration = 'none'
                });
            }
            })(el);

        } //for
    } //if
}; //end of window.onload

el的范围在该匿名函数内更改，因此它确实在for循环的每次迭代中都引用el的值。

Answer 3

您使用的变量el并不是循环迭代的局部变量，因此在触发事件处理程序时它将具有最后一个值。

使用立即调用的函数创建一个作用域，在该作用域中，每次迭代都会获得其自己的变量，该变量包含该迭代的元素：

window.onload = function (){

  var elArray = document.getElementsByTagName("a");
  if(elArray != null && elArray.length > 0){
    for(var count=0; count < elArray.length; count++){

      (function(el){

        if (el.addEventListener) {
          el.addEventListener("mouseover", function (){el.style.textDecoration = 'underline'}, false);
          el.addEventListener("mouseout", function (){el.style.textDecoration = 'none'}, false);
        } else {
          el.attachEvent('onmouseover',function (){el.style.textDecoration = 'underline'});
          el.attachEvent('onmouseout',function (){el.style.textDecoration = 'none'});
        }

      })(elArray[count]);

    }//for
  }//if
};//end of window.onload

但是，为了达到这种特定效果，您可以只使用CSS：

a { text-decoration: none; }
a:hover { text-decoration: underline; }