精简按钮样式切换代码

Posted 2021-05-16 royal_coffee

主管交代,项目需要:一个按钮(button)在鼠标经过时,可以用onmouseover,onmouseout,onmousedown,onmouseup四种事件为其改变样式,但每个按钮都必须写这四个事件,当一个页面上,有N个按钮时,就需要写N*4次事件,如<input type="button" class="btn_mouseout"  value="Inquiry" οnmοuseοver='btn_mouseover' οnmοuseοut='btn_mouseout' οnmοusedοwn='btn_mousedown' οnmοuseup='btn_mouseup'>,那么,有没有办法不用每个按钮都写这四个事件呢?就像函数调用那样精简代码来达来同样的效果呢?

下面有两个方法,每一个是同事写的,相当精简,另一个是我写的.

当然会有更好的办法,请知道的朋友留言我一下,谢谢了.

方法一:

js代码如下:

 

< script LANGUAGE = " javascript " >
   function  highlightButton(s)  ... {
    if ("INPUT"==event.srcElement.tagName)
      event.srcElement.className=s
  }
</ script >

html代码如下:

 

   < tr >
     < td  height ="23" > &nbsp; </ td >
     < td  align ="left"  valign ="top"  onmouseover ="highlightButton('btn_mouseover')"  onmouseout ="highlightButton('btn_mouseout')"  onmousedown ="highlightButton('btn_mousedown')"  onmouseup ="highlightButton('btn_mouseup')" >< input  name ="Inquiry"  type ="button"  class ="btn_mouseout"  id ="Inquiry"  value ="Inquiry" >
       < input  name ="Clear"  type ="button"  class ="btn_mouseout"  id ="Clear"  value ="Clear All" >
</ td >
     < td > &nbsp; </ td >
   </ tr >

 

 

方法二:

js如下:

 

         function  over() ... {if (event.srcElement.className=="btn3_mouseout")...{event.srcElement.className="btn3_mouseover"}}
         function  out() ... {if(event.srcElement.className=="btn3_mouseover")...{event.srcElement.className="btn3_mouseout"}}
        
         function  down() ... {
                
                        if ((event.srcElement.className=="btn3_mouseover"||event.srcElement.className=="btn3_mouseout")&&event.srcElement.className!="btn3_mousedown")
                        ...{
                        event.srcElement.className="btn3_mousedown"
                        }
                        
                        else
                        
                        if (event.srcElement.className=="btn3_mousedown") 
                        ...{
                        event.srcElement.className="btn3_mouseout"
                        }
        }
        
         function  up() ... {
        
                if (event.srcElement.className=="btn3_mousedown" )
                ...{
                event.srcElement.className="btn3_mouseup"
                event.srcElement.className="btn3_mouseout"
                }
                
                else
                
                if (event.srcElement.className=="btn3_mouseup") 
                ...{
                event.srcElement.className="btn3_mouseover"
                }
        }
        document.onmouseover = over
        document.onmouseout = out
        document.onmousedown = down
        document.onmouseup = up

html代码如下:

 

   < tr >
     < td  height ="23" > &nbsp; </ td >
     < td  align ="left"  valign ="top" >< input  name ="Inquiry"  type ="button"  class ="btn3_mouseout"  id ="Inquiry"  value ="Inquiry" >
       < input  name ="Clear"  type ="button"  class ="btn3_mouseout"  id ="Clear"  value ="Clear All" >
  </ td >
     < td > &nbsp; </ td >
   </ tr >

 

优劣请各位朋友评评,另外也请各位达人告诉更优方案,小弟先行谢过了.