聲明：本欄目所使用的素材都是凱哥學堂VIP學員所寫，學員有權匿名，對文章有最終解釋權；凱哥學堂旨在促進VIP學員互相學習的基礎上公開筆記。
在用戶使用鍵盤、鼠標等設備進行操作時，實際上每一次的操作都是在發(fā)起一個事件。
當我們的鼠標點擊到窗口上的按鈕時，并不是鼠標的箭頭真正點擊到這個按鈕了，而是鼠標發(fā)出了一個動作事件，然后這個事件先被傳送到了操作系統(tǒng)的命令處理帶，然后再傳送到負責顯示圖形的圖像數(shù)據(jù)層，事件到這里后圖像數(shù)據(jù)層會先看哪個程序的窗口在最上面(因為不是在最上面就沒必要看了)，再根據(jù)鼠標提供的X Y坐標確認點擊的是哪個窗口上的按鈕，接著再確認這個窗口是哪個程序。
確認完畢后，圖像數(shù)據(jù)層就會將這個動作事件提交給相對應的執(zhí)行程序，執(zhí)行程序里的代碼先尋找是哪個位置的數(shù)據(jù)哪個對象提供的，進行一系列的搜索，找到后這個對象就會執(zhí)行相對應的代碼，然后再將執(zhí)行后的顯示傳送到圖像數(shù)據(jù)中心進行顯示。我們就會看到鼠標點擊到了這個按鈕。
之所以平時使用的時候沒感覺出來，是因為這一系列的復雜的機制都是在瞬間完成的，只有在電腦卡頓的情況下才能感覺到點擊后要等一段時間才會做出相應的響應。
示意圖：
這其中有一個事件委托的概念，我們需要在代碼中把事件委托也可以說是注冊到按鈕上，這時會有一個監(jiān)聽器監(jiān)聽著這個按鈕，當用戶點擊按鈕時就會去調(diào)用委托事件中的代碼，這些代碼都寫在函數(shù)中。
所以簡單來說，就是把一個寫好的函數(shù)通過事件委托到按鈕上，當用戶點擊按鈕后，就會調(diào)用那個函數(shù)，函數(shù)里的代碼就會執(zhí)行。
例如：我把一段打印Hello World的函數(shù)，通過事件委托到按鈕上，當我點擊這個按鈕的時候就會調(diào)用這個函數(shù)，函數(shù)執(zhí)行完之后就會打印Hello World。
以上提到的事件只是眾多事件類型中的一種點擊事件，事件是有很多種類型的，例如：鼠標的單擊、雙擊、滾軸，鍵盤的按鍵彈起、按下、長按等等，反正很多就是了，還有一些是某些元素特有的事件。
在介紹如何委托事件前，先介紹一下如何控制元素對象（標簽對象），因為有些委托事件的方式需要去獲得元素對象來進行事件的委托：
第一種獲得方式是通過id去獲得，這種方式需要用document對象去調(diào)用getElementById函數(shù)并傳遞元素的id值，就可以獲得該id值的元素對象。
代碼示例：
運行結果：
從審查元素中可以看到id值為test_sbutton的元素中的value值，為我js代碼里設置的值。
錯誤示例：
因為代碼是是從上至下解析的，如果你要獲得body里面的元素對象，卻把script寫在了body前面，所以當執(zhí)行js里面獲得元素對象的代碼時就會報錯：
代碼示例：
運行結果：
第二種方式是直接使用id值，可以直接拿id值去定義該元素對象里面的屬性值：
代碼示例：
運行結果：
以上只是介紹比較常見的兩種獲得元素對象的方式，除此之外還有很多種獲得方式，可以參考以下文章：
http://www.jb51.net/article/64874.htm
注意：id值不要設置重復的最好保持唯一性，如果設置重復的話，js就不能直接獲得元素對象，而是會獲得一個對象數(shù)組，如果遇到id值重復的情況下，就得遍歷數(shù)組去獲得對象：
代碼示例：
運行結果：
思維導圖：
接下來開始介紹JavaScript中給元素委托事件的三種常用的方式：
第一種方式，寫好函數(shù)代碼后，通過元素中的事件屬性進行委托，下面用鼠標事件中的mouseout和mouseover事件進行演示，mousseout事件在鼠標移動出該元素時會觸發(fā)，mouseover事件在鼠標移動進該元素時會觸發(fā)，屬于焦點類的事件：
代碼示例：
運行結果：
當鼠標的光標移動進按鈕時會觸發(fā)mouseover事件，移動出按鈕時會觸發(fā)mousseout事件，然后就會調(diào)用委托到事件中的函數(shù)代碼，函數(shù)被調(diào)用執(zhí)行就會在控制臺中輸出這些信息。
所謂焦點就是鼠標的光標的位置，例如當你在文本框輸入文字時需要點擊一下文本框才能輸入，這就是要讓文本框獲得鼠標焦點。
第二種方式，通過id獲取元素對象，然后通過該對象調(diào)用事件屬性，使用函數(shù)表達式的方式把函數(shù)委托給事件：
代碼示例：
運行結果：
除了函數(shù)表達式外也可以使用函數(shù)聲明的方式，把函數(shù)的名稱賦值給元素對象的事件屬性，注意不能寫上()：
代碼示例：
運行結果：
第三種方式，通過addEventListener函數(shù)添加一個事件監(jiān)聽器，需要傳遞事件的名稱，和函數(shù)對象，函數(shù)對象可以是函數(shù)的名稱，也可以是直接寫一個函數(shù)上去：
代碼示例：
運行結果：
同一個元素對象的同一個事件，可以添加多個函數(shù)，這些函數(shù)可以執(zhí)行不同的內(nèi)容，例如我在一個button元素的mouseover事件中分別添加了三個函數(shù)，這三個函數(shù)各自打印了一句話，那么當我鼠標碰到按鈕時，就會打印出三句話：
代碼示例：
運行結果：
addEventListener函數(shù)還有一個布爾參數(shù)，這個參數(shù)定義著父元素和子元素重疊并且都有委托事件的情況時，是先觸發(fā)父元素的事件還是先觸發(fā)子元素的事件，參數(shù)值為true是定義先觸發(fā)父元素的事件，參數(shù)值為false則是定義先觸發(fā)子元素的事件，不定義這個參數(shù)的話，默認情況下是先觸發(fā)子元素的事件。
父元素和子元素重疊情況，不定義addEventListener函數(shù)布爾值的代碼示例：
運行結果：
父元素和子元素重疊情況，定義addEventListener函數(shù)布爾值為true的代碼示例：
運行結果：
還有一種情況就是父元素和子元素不完全重疊，這種情況下不定義addEventListener函數(shù)的布爾值，當鼠標移動到子元素時先觸發(fā)父元素的事件，然后移出子元素時先觸發(fā)子元素的事件再觸發(fā)父元素的事件，這是因為默認情況下子元素的事件先執(zhí)行，所以父元素的事件不會連續(xù)執(zhí)行。
定義addEventListener函數(shù)的布爾值為true的話，當鼠標移動到子元素時先觸發(fā)父元素的事件，然后移出子元素時還是觸發(fā)父元素的事件，最后才觸發(fā)子元素的事件，這是因為布爾值為true的情況下父元素的事件先執(zhí)行，所以父元素的事件會連續(xù)執(zhí)行。
父元素和子元素不完全重疊的情況，不定義addEventListener函數(shù)布爾值的代碼示例：
運行結果：
父元素的事件不會連續(xù)執(zhí)行
父元素和子元素不完全重疊的情況，定義addEventListener函數(shù)布爾值為true的代碼示例：
運行結果： 父元素的事件會連續(xù)執(zhí)行
事件源 Even： 事件源，就是事件產(chǎn)生時的信息收集，可以通過事件源對象獲得很多相關數(shù)據(jù)，可以設置元素的屬性，以下是常見的事件源對象屬性：
通過事件源對象調(diào)用target屬性設置元素的背景顏色代碼示例：
運行結果：
以上只使用到了鼠標事件中的mouseout和mouseover事件，事件還有很多，以下是常見事件的分類思維導圖：
