HTML5鼠标悬浮表格任意一行颜色改变

关于我找了许久才得以发现适用在idea编写HTML5的版本的鼠标悬浮事件改变（好吧，我目前只发现了这一种，并且极其简单，）

问题：如何让自己的鼠标悬浮在某一表格的某一行上颜色发生改变，离开复原

解决措施：（代码如下）

<script type="text/javascript" >
 window.onload = function() {
    var fruitTbl = document.getElementById("tbl_fruit");
    //这里的tbl_fruit是我自己的table标签定义的id,大家要换成自己的
    var rows = fruitTbl.rows;
    for (var i = 1; i < rows.length; i++) {
    //进行一个for循环，注意i从1开始，第一行的表头我们是不需要的
        rows[i].onmouseover = function () {
            this.style.backgroundColor = "navy";
    //如果想要通过js代码设置某节点的样式，则需要加上 .style
        }
        rows[i].onmouseout = function () {
            this.style.backgroundColor = "";
            //空格表示未变化前的表格元素颜色
        }
    }

</script>

但在HTML5中event好像不怎么推荐使用，类似这样

 提示：Deprecated symbol used, consult docs for better alternative//使用了不推荐的符号，请查阅文档以获得更好的替代方案

这里的当前事件event就可以用this来替代