Event Listener Question

I am trying to write some code that will add a couple of event listeners to a number of certain list elements. I am trying to add a mouseover and mouseout css style effect. I know I can do this with CSS, but I’m having problems with IE8 and some other things on my page for some reason (definitely a bug).

How can I reference the element dynamically? this is not working for me nor is getLI[o]. I’m getting alerts just fine, but I need to access each elements style. Thoughts?

var getLI = document.getElementsByTagName(“li”);
for (var o=0;o < getLI.length;o++) {
if (getLI[o].parentNode.id == “subRooms”) {
if (document.body.addEventListener) {
getLI[o].addEventListener(‘onmouseover’, function() { alert(“over”); }, true);
getLI[o].addEventListener(‘onmouseout’, function() { alert(“out”); }, true);
} else if (document.body.attachEvent) {
getLI[o].attachEvent(‘onmouseover’, function() { this.style.color = ‘red’; }, true);
getLI[o].attachEvent(‘onmouseout’, function() { alert(“out”); }, true);
} else {
getLI[o].onmouseover = function() { alert(“asdf”); };
getLI[o].onmouseout = function() { alert(“fdsa”); };
}
}
}

Also in #JavaScript _↴