JavaScript通过事件代理高亮显示表格行的方法
本文实例讲述了JavaScript通过事件代理高亮显示表格行的方法。分享给大家供大家参考。具体实现方法如下：
<!DOCTYPEhtml>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>HighlightRows</title>
<styletype="text/css">
table{
background-color:lightgreen;
}
#third{
background-color:yellow;
}
</style>
</head>
<body>
<!--Demonstrating"EventDelegation"tohighlighttable'rows
onmouseover.
Argumentscanbepassedviathedelegate.
Mysite:andrew.dx.am-->
<tableid="thetable"summary="highlightdemo">
<tr><td>Justone</td><td>..noanother</td></tr>
<tr><td>Second</td><td>..noanother</td></tr>
<trid="third"><td>Athird</td><td>..noanother</td></tr>
<tr><td>Fourthforluck</td><td>..noanother</td></tr>
</table>
<scripttype="text/javascript">
varaddEvent=function(elem,eventType,func){
if(elem.addEventListener)
addEvent=function(elem,eventType,func){
elem.addEventListener(eventType,func,false);
};
elseif(elem.attachEvent)
addEvent=function(elem,eventType,func){
elem.attachEvent('on'+eventType,func);
};
addEvent(elem,eventType,func);
};
vardelegateEvent=function(elem,childElems,eventType,func,args){
addEvent(elem,eventType,function(e){
varevt=e||window.event;
varelem=evt.target||evt.srcElement;
if(elem.nodeName.toLowerCase()==childElems.toLowerCase()){
func(elem,args);
}
});
};
functionhighlightRows(obj,args){
if(args&&args.over){
obj.prevColour=obj.parentNode.style.backgroundColor;
obj.parentNode.style.backgroundColor=args.colour;
if(args.index&&obj.title=="")
obj.title="Row"+obj.parentNode.rowIndex;
}else{
obj.parentNode.style.backgroundColor="";
if(obj.title.indexOf("Row")+1)
obj.title="";
}
}
functioninit(){
delegateEvent(document.getElementById('thetable'),'td','mouseover',
highlightRows,{'colour':'lightblue','over':true,
'index':true});
delegateEvent(document.getElementById('thetable'),'td','mouseout',
highlightRows,{'over':false});
}
addEvent(window,'load',init);
</script>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。