JS事件淺析

一個網頁由三層組成（html 結構，js 行爲，css 表現），一切的東西其實都創建在html上，html裏面的dom提供了一些事件，而後經過js封裝，咱們能夠用js去調用dom上的事件。事件有不少，有我用過的有我沒用過的，今天我想分析一番。

事件流

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

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

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

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

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

事件對象 event

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