Question

如何添加一个用于将鼠标悬停在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也正常工作。我做错了什么想法？

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

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

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

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

事件监听器循环

4 个答案: