Question

Okay so, I have alist of links, I’m processing them with a for loop, attaching events.
The links get a click event that calls a function. The function needs to operate on the object that called it. Like so:

  <ul><li id = 'myId'>Text</li>
    <li id = 'myId'>Text</li>
    <li id = 'myId'>Text</li>
    <li id = 'myId'>Text</li>
    </ul>


   var grab = document.getElementsByTagName('li');
   for (var x =0;x<grab.length;x++){
       grab[x].attachEvent('onmouseover',doSomething);
       }

    function doSomething(){
        this.setAttribute('color','yellow');
    }

This worked fine in all browsers but IE, the problem I’m having there seems to be that IE wants ‘this’ to be the window, rather than the object that called the event.

I get that JQuery solves this problem really easily, its just that I don’t have access to JQuery in this context.Is there a way, just within regular javascript, to get IE using ‘this’ correctly, or a way to approximate the behaviour that everybody else has?

Thanks,

Answer 1

Just use the old standard reliable on[event] handlers.

for (var x = 0, len = grab.length; x < len; x++) { 
   grab[x].onmouseover = doSomething;
}

And make sure you’re not actually duplicating IDs as shown in the question.