[TOC] >[info]Event 對象代表事件的狀態，比如事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態。 事件通常與函數結合使用，函數不會在事件發生前被執行！ ## 事件驅動 1. 事件觸發條件:javascript偵測到的用戶的操作或是頁面的一些行為(怎么發生的) 2. 事件源:引發事件的元素。(發生在誰的身上) 3. 事件處理程序:對事件處理的程序或是函數 (發生了什么事) ## 事件句柄　(Event Handlers) <table class="dataintable"> <tbody> <tr> <th style="width:30%"> 屬性 </th> <th> 此事件發生在何時... </th> </tr> <tr> <td> <a target="_top"> onabort </a> </td> <td> 圖像的加載被中斷。 </td> </tr> <tr> <td> <a target="_top"> onblur </a> </td> <td> 元素失去焦點。 </td> </tr> <tr> <td> <a target="_top"> onchange </a> </td> <td> 域的內容被改變。 </td> </tr> <tr> <td> <a target="_top"> onclick </a> </td> <td> 當用戶點擊某個對象時調用的事件句柄。 </td> </tr> <tr> <td> <a target="_top"> ondblclick </a> </td> <td> 當用戶雙擊某個對象時調用的事件句柄。 </td> </tr> <tr> <td> <a target="_top"> onerror </a> </td> <td> 在加載文檔或圖像時發生錯誤。 </td> </tr> <tr> <td> <a target="_top"> onfocus </a> </td> <td> 元素獲得焦點。 </td> </tr> <tr> <td> <a target="_top"> onkeydown </a> </td> <td> 某個鍵盤按鍵被按下。 </td> </tr> <tr> <td> <a target="_top"> onkeypress </a> </td> <td> 某個鍵盤按鍵被按下并松開。 </td> </tr> <tr> <td> <a target="_top"> onkeyup </a> </td> <td> 某個鍵盤按鍵被松開。 </td> </tr> <tr> <td> <a target="_top"> onload </a> </td> <td> 一張頁面或一幅圖像完成加載。 </td> </tr> <tr> <td> <a target="_top"> onmousedown </a> </td> <td> 鼠標按鈕被按下。 </td> </tr> <tr> <td> <a> onmousemove </a> </td> <td> 鼠標被移動。 </td> </tr> <tr> <td> <a target="_top"> onmouseout </a> </td> <td> 鼠標從某元素移開。 </td> </tr> <tr> <td> <a target="_top"> onmouseover </a> </td> <td> 鼠標移到某元素之上。 </td> </tr> <tr> <td> <a target="_top"> onmouseup </a> </td> <td> 鼠標按鍵被松開。 </td> </tr> <tr> <td> <a target="_top"> onreset </a> </td> <td> 重置按鈕被點擊。 </td> </tr> <tr> <td> <a target="_top"> onresize </a> </td> <td> 窗口或框架被重新調整大小。 </td> </tr> <tr> <td> <a target="_top"> onselect </a> </td> <td> 文本被選中。 </td> </tr> <tr> <td> <a target="_top"> onsubmit </a> </td> <td> 確認按鈕被點擊。 </td> </tr> <tr> <td> <a target="_top"> onunload </a> </td> <td> 用戶退出頁面。 </td> </tr> </tbody> </table> ## 綁定事件 1. 在腳本中綁定,通過獲取節點對象進行綁定 ~~~ <script type="text/javascript"> var btn = document.getElementById('btn'); btn.onclick = function () { alert('我被點擊了'); } </script> ~~~ 2. 直接在HTML元素綁定 ~~~ <input type="text" onblur="alert('我失去焦點了')"> ~~~ >[danger]**作業：**練習各種常用事件。