簡介
Event是什麼呢? 當訪客點一個 Button, Click的Event 就產生了。 當滑鼠箭頭點到一個連結時, MouseOver的 Event就產生了。 我們叫 Click 和MouseOver Event指令(英文: Event-Handler)。
方法
Event |
將會執行... | Event指令 | | click | 當訪客按一個Button或連結
| onClick | | change | 當訪客改變text, textarea, 和 select element | onChange | | mouseover | 當滑鼠點到一個連結時 | onMouseOver | | mouseout | 當滑鼠箭頭移開一個連結時 | onMouseOut | | submit | 當訪客Submit一個<form>時 | onSubmit | | resize | 當訪客重新設定視窗大小時 | onResize | | load | 當訪客讀取網頁時 | onLoad | | unload | 當訪客離開當前網頁並前往下一個動作時 | onUnload |
範例語法
<input type="button" value="onClick" onClick="alert('Hi,Event onClick')">
<input type="button" value="onMouseOver" onMouseOver="alert('Hi,Event onMouseOver')">
<input type="button" value="onMouseOut" onMouseOut="alert('Hi,Event onMouseOut')">
<BODY onUnload="alert('你~不~要~走')">
簡易換圖
<script language="JavaScript">
function up() { for(var i=0;i < document.UpDown.length;i++) { document.UpDown[i].src="../../public/images/java.jpg"; } }
function down(line,filename) { for(var i=0;i < document.getElementsByName(line).length;i++) { document.getElementsByName(line)[i].src="../../public/images/"+filename+".png"; } } </script>
<img src="../../public/images/java.jpg" name="UpDown" border=0 onMouseOver="up();" onMouseOut="down(this.name,'java2');"/>
<img src="../../public/images/java.jpg" name="UpDown" border=0 onMouseOver="up();" onMouseOut="down('UpDown','java2');"/>
更換背景顏色
<A HREF="#" onMouseOver="bgColor='#B1CBE4'"><font color="#B1CBE4"></font></A>
<A HREF="#" onMouseOver="bgColor='#FF9900'"><font color="#FF9900">■</font></A>
<A HREF="#" onMouseOver="bgColor='#000000'"><font color="#000000">■</font></A>
<A HREF="#" onMouseOver="bgColor='#CC3300'"><font color="#CC3300">■</font></A>
<A HREF="#" onMouseOver="bgColor='#CC6699'"><font color="#CC6699">■</font></A>
<A HREF="#" onMouseOver="bgColor='#A9B88D'"><font color="#A9B88D">■</font></A>
<A HREF="#" onMouseOver="bgColor='#ffffff'"><font color="#ffffff">■</font></A>
文字顏色
<script language="JavaScript"> function changeColorOver() {
document.getElementById('change').style.color='#448ECC'; }
function changeColorOut() {
document.getElementById('change').style.color='#red'; }
</script>
<a href="#" onMouseOver="this.style.backgroundColor='#000080'" onMouseOut="this.style.backgroundColor='#c0c0c0'">文字變底色</a>
<a href='#' id=change onMouseOver='changeColorOver();' onMouseOut='changeColorOut();'>文字換色</a>
|
|
