JavaScript之事件型別
阿新 • • 發佈：2018-12-12
事件型別
Web瀏覽器中可能發生的事件有很多型別。DOM3事件規定了以下幾類事件：
- UI事件，當用戶與頁面上的元素互動時觸發；
- 焦點事件，當元素獲得或失去焦點的時觸發；
- 滑鼠事件，當用戶通過滑鼠在頁面上執行操作時觸發；
- 滾輪事件，當用戶通過滑鼠滾輪或類似裝置時觸發；
- 文字事件，當在文件中輸入文字時觸發；
- 鍵盤事件，當用戶通過鍵盤在頁面執行操作時觸發；
- 合成事件，當為IME（input method editor 輸入法編輯器）輸入字元時觸發；
- 變動（mutation）事件，當底層DOM結構發生變化時觸發；
- 變動名稱事件，當元素或者屬性名變動時觸發。此類事件已經被廢棄。
1. UI事件
UI事件指的是那些不一定與使用者操作有關的事件。現有的UI事件如下:
- DOMActivate：表示元素已經被使用者操作啟用（DOM3中已經廢棄）；
- load：當頁面完全載入後在window上觸發，當所有框架都載入完畢後在框架集上觸發，圖片載入完在img標籤上觸發，或者嵌入的內容載入完在object元素上面觸發；
- unload：當頁面完全解除安裝後在window上觸發，當所有框架都解除安裝後在框架集上觸發，或者嵌入的內容解除安裝後在object元素上面觸發；
- abort：在使用者停止下載過程時，如果嵌入的內容沒有載入完，則在object元素上面觸發；
- error：當發生JavaScript錯誤時在window上面觸發，當無法載入影象時在img標籤上觸發，無法載入嵌入內容時在< object>上觸發，或者當一個或者多個框架無法載入時在框架集上觸發；
- select：當用戶選擇文字框（< input> or < texterea>）中的一個或者多個字元時觸發；
- resize：當視窗或者框架的大小變化時在window或框架上面觸發；
- scroll：當用戶滾動帶滾動條的元素中的內容時，在該元素上面出發。< body>元素中包含所載入頁面的滾動條。
2. 焦點事件
焦點事件會在頁面元素獲得或失去焦點時觸發。利用這些事件並於document.hasFocus()方法及document.activeElement屬性配合，可以知曉使用者在頁面上的行蹤。
- focus：在元素獲得焦點時觸發。這個事件不會冒泡，所有瀏覽器都支援
- blur：在元素失去焦點時觸發。這個事件不會冒泡，所有的瀏覽器都支援；
- DOMFocusIn：在元素獲得焦點時觸發。這個事件與HTML事件focus等價，但它冒泡。（DOM3廢棄，改用focusin）僅opera支援
- DOMFocusOut: 在元素失去焦點時觸發。這個事件是HTML事件blur的通用版本。（DOM3廢棄，選擇focusout）僅opera支援
- focusin：focus冒泡版
- focusout：blur冒泡版
當焦點從頁面的一個元素移動到另一個元素會依次觸發以下事件：
- focusout：在失去焦點的元素上觸發；
- focusin：在獲得焦點的元素上觸發；
- blur：在失去焦點的元素上觸發；
- DOMFocusOut：在失去焦點的元素上觸發；
- focus：在獲得焦點的元素上觸發；
- DOMFocusIn：在獲得焦點得元素上觸發。
3. 滑鼠和滾輪事件
滑鼠事件是web開發中最常用的一類事件，畢竟滑鼠還是最主要的定位裝置。DOM3級中定義了9種滑鼠事件：
- click：使用者單機滑鼠（一般是左邊的按鈕）或者按下回車鍵時候觸發。
- dbclick：在使用者雙擊主滑鼠按鈕（一般是左）時觸發。
- mousedown：在使用者按下了任意滑鼠時觸發，不能通過鍵盤觸發這個事件。
- mouseenter：在滑鼠游標從元素外部首次移動到元素範圍之內時觸發，這個事件不冒泡，而且在游標移動到後代元素不會觸發。
- mouseleave：在位於元素上方的滑鼠游標移動到元素範圍之外時觸發，這個事件不冒泡，對應mouseenter。
- mousemove：當滑鼠指標在元素內部移動時重複地觸發。不能通過鍵盤觸發。
- mouseout：在滑鼠指標位於一個元素上方，然後使用者將其移入到另一個元素時候觸發。新元素可能在舊元素的外部也有可能是舊元素的子元素。
- mouseover：在滑鼠指標位於一個元素的外部，然後使用者將其首次移入到一個元素的邊界之內觸發。
- mouseup：使用者釋放滑鼠按鈕時觸發。不能通過鍵盤觸發這個事件。
4. 鍵盤和文字事件
DOM3級有三個鍵盤事件：
- keydown：當用戶按下鍵盤上的任意鍵時觸發，而且如果按住不放的話，會重複觸發此事件。
- keypress：當用戶按下鍵盤上的字元鍵時觸發，而且如果按住不放的話，會重複觸發此事件。
- keyup：當用戶釋放鍵盤上的鍵時觸發。
一個文字事件：
- textInput：可以用開替代keypress，當用戶再可編輯區域輸入字元時觸發該事件。與keypress不同的是，該事件只會在使用者輸入可視字元時觸發，而keypres事件則只要按下鍵即觸發(如CapsLock，Backspace)。
5. 複合事件
複合事件（composition event）是DOM3級事件中新增的一類事件，用於處理IME的輸入序列。IME（input method editor， 輸入法編輯器）可以讓使用者輸入在物理鍵盤上找不到的字元。
6. 變動事件
暫時不想寫
7. HTML5事件
- contextmenu事件 右鍵調出上下文選單
- beforeunload事件 在瀏覽器解除安裝頁面之前觸發，主要是為了讓開發人員有可能在頁面解除安裝前阻止這一操作。
- DOMContentLoaded事件 DOMContentLoaded事件會在形成完整的DOM樹之後就會觸發，不會理會影象，JavaScript檔案，css檔案或者其他資源是否載入完成。與load事件的區別在於load事件會在頁面載入完所有資源後觸發。
- readystatechange事件 readystatechange有五種狀態： uninitialized（未初始化） ，loading（正在載入），loaded（載入完畢），interactive（互動），complete（完成）
- hashchange事件： HTML5新增了hashchange事件，以便於在URL引數列表發生變化時通知開發人員。