如何使用js减少页面大量重复(js事件)语句

看了很多人的代码,特别是一些鼠标移进移出变色的代码块,真是一个字,惨啊

<tr onMouseOver="this.bgColor='#ff0000'" onmouseout="this.bgColor='#cccccc'">

<td>内容</td>

</tr>

<tr onMouseOver="this.bgColor='#ff0000'" onmouseout="this.bgColor='#cccccc'">

<td>内容</td>

</tr>

<tr onMouseOver="this.bgColor='#ff0000'" onmouseout="this.bgColor='#cccccc'">

<td>内容</td>

</tr>

.....

现在给你一种更方法更易维护的方法,首先输出html代码如下

<table id="onTab">

<tr>

<td>标韪栏我颜色不变</td>

</tr>

<tr rel="onMouse">

<td>内容栏我颜色想变</td>

</tr>

<tr rel="onMouse">

<td>内容栏我颜色想变</td>

</tr>

<tr rel="onMouse">

<td>内容栏我颜色想变</td>

</tr>

</table>

<script type="text/javascript">trBgColor("onTab");</script>

当显示完后,在使用js 调用 函数如 trBgColor

function trBgColor(obj){

var x = document.getElementById(obj); //只读id为obj值的内容块

var y = x.getElementsByTagName("tr"); //读tr

for (var i=0;i<y.length;i++){

if(y[i].getAttribute("rel") == "onMouse"){

//只有当tr元素 rel为 onMouse才值行以下操作,你也可以去掉这个条件

y[i].onmouseover=xxxover; //移进

y[i].onmouseout=xxxout; //移出

y[i].ondblclick=xxxdbl; //还可以加个双击事件,你也可以加onclick等等各事件

}

}

}

function xxxover(){

this.style.background="#ffc";

}

function xxxout(){

this.style.background="#fff";

}

function xxxdbl(){

alert("你双击我了");

}