javascript - 在 IE 7 的 javascript 中添加事件监听器

Question

我想使用图像制作菜单列表。每个菜单都有两个图像(filename.jpg 和 filename_active.jpg)。每次我将鼠标放在其图像上时，图像都会更改为另一张图像。它在 Firefox 和 Chrome 中工作正常，但在 IE 7 及更低版本中遇到问题。问题是，javascript只会读取最后一部分(在这种情况下，他只会读取第三个菜单)。下面我将展示的代码只是 IE 中 javascript 代码的一部分。让我展示我的代码:

HTML:

<ul>
<li class="caresoul_menu active" id="menuli_first"><a href="first.php"><img src="img_first_active.jpg" /></a></li>
<li class="caresoul_menu" id="menuli_two"><a href="two.php"><img src="img_two.jpg" /></a></li>
<li class="caresoul_menu" id="menuli_three"><a href="three.php"><img src="img_three.jpg" /></a></li>

Javascript:

var caresoul_menu = Dom.getElementsByClassName('caresoul_menu', 'li');
if(caresoul_menu.length > 0) {
   for(var im in caresoul_menu) {
      if (caresoul_menu[im].attachEvent) {
         caresoul_menu[im].attachEvent('onmouseover', function(){
            var liId = caresoul_menu[im].getAttribute('id').split('menuli_')[1];
            caresoul_menu[im].firstChild.firstChild.setAttribute('src','/image/'+liId+'_active.png');
         })
      }
   }
}

Answer 1

我会解释一下:当鼠标悬停事件被触发时，for循环已经结束，所以im变量具有最后一个已知值，并且该值对于所有 <li> 都是相同的元素。尝试这样的事情:

  if (caresoul_menu[im].attachEvent) {
     (function (that) {
        that.attachEvent('onmouseover', function(){
           var liId = that.getAttribute('id').split('menuli_')[1];
           that.firstChild.firstChild.setAttribute('src','/image/'+liId+'_active.png');
        });
     })(caresoul_menu[im]);
  }

您真的需要使用attachEvent ？如果您以 DOM0 方式附加事件监听器 ( element.onmouseover = function(){} )，则可以使用 this事件监听器中的关键字。