Event listener loop

Question

how do i add a listener for hovering over div tags like this:

| btn1 | btn2 | btn3 | btn4 |

i want to add a listener that loops through them like i show below and then applies a function if it has mouseover.

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

i have this and its not working, and yes it is calling the function listen(), because i added an alert thing in there to make sure its working correctly, and functionwat works right too. any ideas im doing wrong?

Answer 1

What browser are you using? Registering event handlers is different browser to browser. PPK has some good discussion of browser events here.

In short, this is the cross-browser code for adding a handler.

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

Now you can attach the event with

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

Answer 2

Instead of looping for each item and attaching events, look into implementing event delegation. As it relates your situation, let assume you use jQuery and your buttons' markup is as followed:

<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

It seems that you might be somewhat messy with your variables. For instance, you do not use var to declare i, so it might end up in the global namespace. Following this, are you sure functionwat is really a function at the time listen() executes?

You could check that by;

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

David,

You're not having any luck because, I am almost positive you are using a browser which is not IE. Your events will not fire in a non-IE browser because the event "mouseenter" is only exposed in IE. To make it work, you need to change "mouseenter" to use "mouseover".

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

to

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