HTML DOM - 事件 · W3School Javascript & jQuery 教程

# HTML DOM - 事件 HTML DOM 允許 JavaScript 對 HTML 事件作出反應。。 ## 實例 ``` <div style="background-color:#8AB83D;width:160px;height:60px; margin:20px;padding-top:20px;color:#ffffff;font-weight:bold; font-size:14px;float:left;text-align:center;" onmouseover="this.innerHTML='Thank You'" onmouseout="this.innerHTML='Mouse Over Me'">Mouse Over Me</div> <div style="background-color:#8AB83D;width:160px;height:60px; margin:20px;padding-top:20px;color:#ffffff;font-weight:bold; font-size:14px;float:left;text-align:center;" onclick="clickMeEvent(this)">Click Me</div> <script type="application/javascript">  </script> ``` ## 對事件作出反應當事件發生時，可以執行 JavaScript，比如當用戶點擊一個 HTML 元素時。如需在用戶點擊某個元素時執行代碼，請把 JavaScript 代碼添加到 HTML 事件屬性中： ``` onclick=_JavaScript_ ``` HTML 事件的例子： * 當用戶點擊鼠標時 * 當網頁已加載時 * 當圖片已加載時 * 當鼠標移動到元素上時 * 當輸入字段被改變時 * 當 HTML 表單被提交時 * 當用戶觸發按鍵時在本例中，當用戶點擊時，會改變 <h1> 元素的內容： ### 實例 ``` <!DOCTYPE html> <html> <body> <h1 onclick="this.innerHTML='hello!'">請點擊這段文本!</h1> </body> </html> ``` 在本例中，會從事件處理程序中調用函數： ### 實例 ``` <!DOCTYPE html> <html> <head> <script> function changetext(id) { id.innerHTML="hello!"; } </script> </head> <body> <h1 onclick="changetext(this)">請點擊這段文本!</h1> </body> </html> ``` ## HTML 事件屬性如需向 HTML 元素分配事件，您可以使用事件屬性。 ### 實例向 button 元素分配一個 onclick 事件： ``` <button onclick="displayDate()">試一試</button> ``` 在上面的例子中，當點擊按鈕時，會執行名為 displayDate 的函數。 ## 使用 HTML DOM 來分配事件 HTML DOM 允許您使用 JavaScript 向 HTML 元素分配事件： ### 實例為 button 元素分配 onclick 事件： ``` <script> document.getElementById("myBtn").onclick=function(){displayDate()}; </script> ``` 在上面的例子中，名為 displayDate 的函數被分配給了 id=myButn" 的 HTML 元素。當按鈕被點擊時，將執行函數。 ## onload 和 onunload 事件當用戶進入或離開頁面時，會觸發 onload 和 onunload 事件。 onload 事件可用于檢查訪客的瀏覽器類型和版本，以便基于這些信息來加載不同版本的網頁。 onload 和 onunload 事件可用于處理 cookies。 ### 實例 ``` <body onload="checkCookies()"> ``` ## onchange 事件 onchange 事件常用于輸入字段的驗證。下面的例子展示了如何使用 onchange。當用戶改變輸入字段的內容時，將調用 upperCase() 函數。 ### 實例 ``` <input type="text" id="fname" onchange="upperCase()"> ``` ## onmouseover 和 onmouseout 事件 onmouseover 和 onmouseout 事件可用于在鼠標指針移動到或離開元素時觸發函數。 ### 實例一個簡單的 onmouseover-onmouseout 例子： ``` <div style="background-color:#8AB83D;width:150px;height:60px; margin:20px;padding-top:20px;color:#ffffff;font-weight:bold; font-size:18px;text-align:center;" onmouseover="this.innerHTML='謝謝'" onmouseout="this.innerHTML='把鼠標移上來'">把鼠標移上來</div> <p class="tiy"><a target="_blank" href="/tiy/t.asp?f=dom_event_onmouseover">親自試一試</a></p> </div> ``` ## onmousedown、onmouseup 以及 onclick 事件 onmousedown、onmouseup 以及 onclick 事件是鼠標點擊的全部過程。首先當某個鼠標按鈕被點擊時，觸發 onmousedown 事件，然后，當鼠標按鈕被松開時，會觸發 onmouseup 事件，最后，當鼠標點擊完成時，觸發 onclick 事件。 ### 實例一個簡單的 onmousedown-onmouseup 實例： ``` <div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:#8AB83D;width:150px;height:60px; margin:20px;padding-top:20px;color:#ffffff;font-weight:bold; font-size:18px;text-align:center;">點擊這里</div> <script type="application/javascript">  </script> ``` ## HTML DOM 事件對象參考手冊如需每個事件的完整描述和例子，請訪問我們的 [HTML DOM 參考手冊](/jsref/index.asp "JavaScript 和 HTML DOM 參考手冊")。