目錄
什么是事件
常見事件
鼠標事件
鍵盤事件
表單事件
事件的綁定方式
通過元素的屬性綁定
通過 DOM 編程動態綁定
總結：
什么是事件
HTML 事件可以是瀏覽器行為，也可以是用戶和行為。當一些行為發生時，可以自動觸發對應的 JS 函數的運行。JS 的事件驅動指的就是，行為觸發代碼運行，這一特點。
常見事件
?詳見：HTML DOM 事件對象 | 菜鳥教程
鼠標事件
鍵盤事件
表單事件
事件的綁定方式
通過元素的屬性綁定
測試鼠標事件
測試鍵盤事件
測試表單事件：
這里需要注意的是：
當點擊輸入框之后，即是獲得焦點了，再當鼠標點擊輸入框以外的位置，即是失去焦點了。
當向輸入框中輸入內容后，控制臺并不會打印“內容改變了”，而是當輸入完內容之后，鼠標再點擊輸入框以外的位置，此時才真的是內容發生改變了，才會打印“內容改變了”。
我們還可以拿到用戶在輸入框 / 選擇框改變的值：
補充：在 select 標簽的 option 標簽中，value 值默認就是雙標簽中間的文本，但我們也可以在 option 標簽中手動指定 value ==》 <option value = "1">北京</option>
還有是在表單提交的按鈕上關聯事件：
我們關聯的事件 testSubmit 函數中，使用的是 alert，這樣在這里，我們可以有機會來阻止表單的提交 ==》event.preventDefault(); 這行代碼，就可以阻止組件的默認行為（組件的默認行為，就類似于，點擊 submit 的按鈕，就會提交，點擊 reset 的按鈕，就會重置~）
增加了阻止組建默認行為的代碼后，仍然會跳出彈框，但是當我們點擊確定的時候，卻無法跳轉到表單中的 action 地址~
還有阻止表單提交的方法如下：
彈窗有三種方式：
? ? ? ? 1. alert() 信息提示框
? ? ? ? 2. prompt() 信息輸入框
? ? ? ? 3. confirm() 信息確認框
上面的這種阻止方法，就利用了信息確認框，confirm() 會給我們返回一個 boolean 類型的變量，當我們點擊取消的時候，flag 為 false，就會阻止表單提交~
還有一種方法是：直接利用返回值~
補充注意：
? ? ? ? 1. 通過事件元素屬性綁定函數，在行為發生的時候會自動執行函數
? ? ? ? 2. 一個事件可以同時綁定多個函數
? ? ? ? 3. 一個元素可以同時綁定多個事件
? ? ? ? 4. 方法中可以傳入 this 對象，代表當前元素
通過 DOM 編程動態綁定
這里先是大概介紹一下 DOM 編程~
通過 document.getElementById 獲得了一個對象，這個對象就是一個按鈕
但，細心的觀眾已經發現，上面的 script 代碼，我們是放在了 body 里面，我們前面不是說過嗎，script 的代碼，放在任何地方都可以，但是我們一般不是都放在 head 標簽中嗎？
==》
我們嘗試一下，如果把 DOM 編程的代碼，放在 head 中
?
測試發現，我勒個豆，為什么這次點擊那個按鈕，就沒有反應了呢？？？?
==》
代碼的順序會影響瀏覽器對代碼的解析~
瀏覽器從上往下解析，如果 DOM 編程中的代碼，放在 body 中的 button 后面，就可以正常通過 documentr.getElementById 來返回獲取到這個按鈕。
但是，當 DOM 編程中的代碼，被放在 head 中，瀏覽器解析的時候，從上往下掃描，是先掃到了 document.getElementById，通過 id 找到 btn1，但此時瀏覽器還沒有掃到下面的 button 代碼，所以，這行代碼就無法根據 document.getElementById 來獲得按鈕，所以獲取的對象就是 null，是無法在 null 上設置事件的~ 所以當我們 F12 打開控制臺的時候，會出現下面的報錯信息~
如何解決呢？？？
==》
可以先讓瀏覽器掃描完完整的所有代碼，然后再執行 script 里面的代碼就可以啦~
這時候就繼前三種，鼠標事件，鍵盤事件，表單事件之后，有了第四種事件，頁面加載事件~
onload ==》 頁面加載完畢事件~
onload 事件是多會發生的呢？？?
==》
當瀏覽器將所有的代碼都掃描完成之后，才會執行 onload 綁定的事件
如上面的代碼， 就可以實現我們想要的功能啦~
即因為 body 中有了 onload 事件，就會掃描完整個瀏覽器的代碼，再執行 onload 中的代碼，將其封裝為一個函數 ready()
我們也可以對上面的方法進行簡寫：
直接在 head 位置的 script 中，用 window.onload 即可~
?我們也可以用上面的方法對 div 進行事件綁定：
通過上面的代碼，就可以讓本來是 green 的 div 框，通過單擊，然后轉換成 red ~
總結：
DOM 編程在本文僅僅只是淺嘗即止是使用，后面我們會詳細介紹~
