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>