JS基础(二)事件监听练习之table鼠标悬停行变色

JS监听事件简单学习:

　　[object].addEvent("事件类型","处理函数","冒泡事件或捕获事件");
　   [object].removeEvent("事件类型","处理函数","冒泡事件或捕获事件");

场景:

　　表格标题行背景色是黄色，奇数行是白色，偶数行是灰色。

　　鼠标悬停在行上的时候，触发事件，背景颜色变成红色。

效果如图:

JavaScript代码：

<script language="JavaScript">
            //dom加载完毕后
            window.onload = function() { setTrClass(); }; function setTrClass() { var tr = document.querySelectorAll('tr'); console.log(tr); for(var i = 0; i < tr.length; i++) { if(i % 2 == 0) { tr[i].style.backgroundColor = 'grey'; tr[i].addEventListener('mouseout', function() { this.style.backgroundColor = 'grey'; }, false) } else { tr[i].style.backgroundColor = 'white'; tr[i].addEventListener('mouseout', function() { this.style.backgroundColor = 'white'; }, false) } tr[i].addEventListener('mouseover', function() { this.style.backgroundColor = 'red'; }, false) } } </script>