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>