事件监听器循环答案

【问题标题】：Event listener loop事件监听器循环
【发布时间】：2010-02-19 15:20:40
【问题描述】：

我如何添加一个监听器以将鼠标悬停在这样的 div 标签上：

| btn1 | btn2 | btn3 | btn4 |

我想添加一个像下面显示的那样循环遍历它们的侦听器，然后在鼠标悬停时应用一个函数。

function listen() {
 for (i=1;i<=10;i++) {
  wat = document.getElementById('btn'+i);  
  wat.addEventListener('mouseover',functionwat,false );
 }
}

我有这个，但它不工作，是的，它正在调用函数 listen()，因为我在其中添加了一个警报，以确保它正常工作，并且 functionwat 也可以正常工作。有什么想法我做错了吗？

【问题讨论】：

对不起，我不知道作用域是什么，但它就在listen()函数下
大卫，请阅读并再次回复：en.wikipedia.org/wiki/Scope_%28programming%29

标签： javascript events javascript-events

【解决方案1】：

你用的是什么浏览器？注册事件处理程序是不同的浏览器。 PPK 对浏览器事件有一些很好的讨论here。

简而言之，这是添加处理程序的跨浏览器代码。

function addEventSimple(obj,evt,fn) {
    if (obj.addEventListener)
        obj.addEventListener(evt,fn,false);
    else if (obj.attachEvent)
        obj.attachEvent('on'+evt,fn);
}

现在您可以将事件附加到

function listen() {
    for (i=1;i<=10;i++) {
        wat = document.getElementById('btn'+i);     
        addEventSimple(wat, 'mouseenter', functionwat);
    }
}

【讨论】：

ok 试过了，还是不行。我把 addeventsimple 放在函数 listen() 上面对吗？

【解决方案2】：

不要为每个项目循环并附加事件，而是考虑实现事件委托。由于它与您的情况有关，假设您使用 jQuery 并且按钮的标记如下：

<div id="btnList">
<button id="btn1">btn1</button>
<button id="btn2">btn2</button>
<button id="btn3">btn3</button>
<button id="btn4">btn4</button>
</div>

JavaScript：

$(document).ready(function()
{
   $("#btnList button").bind(
          "mouseenter mouseleave",
          function(e) {
             //do something based on target/id 
             alert(this.id);
          });
});

【讨论】：

为什么假设他使用 jQuery？ jQuery 就像 Javascript 中的另一种语言。

【解决方案3】：

您的变量似乎有些混乱。例如，您不使用var 来声明i，因此它可能最终位于全局命名空间中。在此之后，您确定functionwat 在listen() 执行时真的是一个函数吗？

你可以检查一下；

function listen() {

   if(typeof functionwat !== "function") {
      alert("functionwat is not a function, but a " + typeof functionwat);
   }

   for (var i = 1; i <= 10; ++i) {
      wat = document.getElementById("btn"+i);  
      wat.addEventListener("mouseover", functionwat, false);
   }
}

【讨论】：

【解决方案4】：

大卫，

您没有任何运气，因为我几乎可以肯定您使用的浏览器不是 IE。您的事件不会在非 IE 浏览器中触发，因为事件“mouseenter”仅在 IE 中公开。要使其工作，您需要将“mouseenter”更改为使用“mouseover”。

function listen() {
    for (i=1;i<=10;i++) {
        wat = document.getElementById('btn'+i);     
        addEventSimple(wat, 'mouseenter', functionwat);
    }
}

到

function listen() {
    for (i=1;i<=10;i++) {
        wat = document.getElementById('btn'+i);
        if(wat) { addEventSimple(wat, 'mouseover', functionwat); }
    }
}

【讨论】：