摘要：事件有很多，有我用過的有我沒用過的，今天我想分析一番。阻止默認事件，表單提交，標簽。觸發事件的元素，事件委托會用到。在文本插入文本框之前會觸發事件。

一個網頁由三層組成（html 結構，js 行為，css 表現），一切的東西其實都建立在html上，html里面的dom提供了一些事件，然后通過js封裝，我們可以用js去調用dom上的事件。事件有很多，有我用過的有我沒用過的，今天我想分析一番。

我們都知道，有兩種事件流，一個是冒泡一個是捕獲。

捕獲就是從body開始到你觸發事件的節點，從外到內的一個過程。

冒泡呢，與之相反，從你觸發的節點開始，一級一級往外，直到body，是一個從內到外的過程。

那么他們兩個是同時進行的嗎？他們的順序是先捕獲，再冒泡。

在addEventListener中addEventListener（event事件名稱，function回調函數，是否在捕獲或冒泡階段執行）第三個參數可以改變事件觸發時機。

div.onclick=function(event){}這個里面的event就是事件對象，我這里說幾個常用的。

event.preventDefault() //阻止默認事件，表單提交，a標簽。
event.stopPropagation() //阻止傳遞下去，一幫用在一些自定義組件上，比如遮罩隱藏，在彈框上就要阻止傳遞了。
event.target //觸發事件的元素，事件委托會用到。

下面我會把事件列舉一下

通用事件

load 加載成功，window.load(function(){}),還有一個與之類似的DOMContentLoad當DOM加載完成之后觸發。

unload 與之相反，卸載的時候

error 發送錯誤的時候，這個比較有意思。img觸發error之后使用一張占位圖。監聽全局的錯誤提示，然后統計匯總，比如fundebug，也可以自己根據特性寫一個針對公司項目的。

scroll 滾動的時候觸發，無限滾動之類的一些效果

resize 放大縮小窗口的時候發生變化，和上面的scroll都需要注意去抖，

鼠標事件 傳送門，去看鼠標事件

click 單擊事件，在DOM上單擊鼠標時候觸發。用戶在完成一次mousedown和mouseup之后觸發click。觸發順序是：mousedown -> mouseup -> click。

mousedown和mouseup 鼠標按下和彈起，使用頻率不是很高。可以做一下拖動之類的效果。

mouseout和mouseover 鼠標移出和移入，使用起來會有冒泡的問題，可以使用延時的方法解決

mouseleave和mouseenter 鼠標移除和移除，解決了冒泡的問題。

mousemove 鼠標移動

鍵盤通用事件

keydown 按下鍵盤

keypress 中間的一個事件

keyup 抬起鍵盤

textInput 是對keypress的補充，用意是在將文本顯示給用戶之前更容易攔截文本。在文本插入文本框之前會觸發textInput事件。

compositionstart 在IME的文本復合系統打開時觸發，表示要開始輸入了。當你使用輸入法的時候會觸發一下

compositionupdate 在向輸入字段中插入新字符時觸發。

compositionend 在IME的文本復合系統關閉時觸發，表示返回正常鍵盤的輸入狀態。

控件事件

input 當內容發生改變的時觸發，有可能是代碼觸發的改動兼容ie的話input propertychange

change 當失去焦點時，內容改變觸發

blur 失去焦點觸發

focus 獲得焦點觸發

DOM變動事件
這類事件我沒有用到過，前段時間在網上看到了一些，整合一下寫寫測試測試地址

DOMNodeInserted 插入節點時觸發，appendChild這種

DOMNodeRemoved 移除節點時觸發，removeChild

DOMSubtreeModified 發生變化最后會觸發

DOMNodeInsertedIntoDocument

DOMAttrModified

DOMCharacterDataModified

觸摸事件 移動端

touchstart 觸摸

touchmove 觸摸時移動

touchend 移開
手勢 gesturestart - gesturechange - gestureend