在 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 关键字。