第56節 事件類型（Event Type）-Web前端開發之Javascript-王唯

本内容是用于Web前端開發的Javascript視訊的課件，請通過Master Brother JavaScript視訊課程學習。

事件類型很多，不同類型的事件有不同的資訊;

DoM2 級事件指定以下五個事件：

UIEvent（使用者界面，使用者界面）事件，當使用者與頁面上的元素互動時觸發;

MouseEvent 滑鼠事件，當使用者使用滑鼠在頁面上執行操作時觸發;

KeyboardEvent 鍵盤事件：通過鍵盤在頁面上執行操作時觸發;

HTML事件：當浏覽器視窗更改或發生特定的用戶端/伺服器互動時觸發;

突變事件更改事件：當底層 DOM 結構更改時觸發;

DoM3 級别在 DOM2 之上重新定義了這些事件，并添加了一些：

焦點事件事件：當元素獲得或失去焦點時觸發;

WheelEvent wheel 事件：使用滑鼠滾輪（或類似裝置）時觸發;

文本事件：在文本中輸入文本時觸發;

綜合事件：在輸入法編輯器的字元時觸發;

HTML5規範還定義了大量事件：曆史管理，拖放，跨文本通信和多媒體等事件;

除了這些事件之外，一些浏覽器還在dom和BOM中實作了其他專有事件;

從另一個角度來看，事件可以大緻分為幾大類：

與裝置相關的輸入事件：這些事件依賴于特定的輸入裝置，例如滑鼠和鍵盤，但也取決于觸摸事件;

與裝置無關的輸入事件：不依賴于特定的輸入裝置，例如點選事件，可以通過滑鼠點選，也可以通過鍵盤或觸摸裝置來實作;

使用者界面事件：通常是指在窗體控件上注冊的事件，例如文本框獲得焦點的焦點事件、控件更改值的更改事件或送出表單的送出事件;

狀态更改事件：表示某些生命周期或相關狀态中的變化的事件，例如随文檔加載的加載事件或 DOMContentLoaded 事件或文檔狀态 readystatechange 事件;

特定API事件：HTML5和相關規範中定義的事件，如拖放事件，多媒體相關事件;

事件：

UIEvent 事件表示簡單的使用者界面事件，但包含的事件不一定與使用者操作相關，而主要與元素的焦點相關;

事件類繼承自事件類;

它定義自己的屬性，例如：細節，圖層X，圖層Y，pageX，pageY，sourceCapability，視圖和哪些;

與事件相關的活動：

DOMActive：表示當元素被使用者操作（通過滑鼠或鍵盤）激活時，該元素已發生;

load：頁面完全加載時在視窗上觸發，加載所有幀時在幀集上觸發，加載圖像時在< img >元素上觸發，加載嵌入内容時在< >元素上觸發;

解除安裝：頁面完全解除安裝時在視窗上觸發，所有幀解除安裝時在幀集上觸發，或解除安裝嵌入内容時在< >元素頂部觸發;

中止：當使用者停止下載下傳過程時，如果嵌入的内容未加載，則在< >元素上觸發;

錯誤：當Javascript錯誤發生時在Windows上觸發，當圖像無法加載時在 <img>元素上觸發，當無法加載嵌入内容時在< >元素上觸發，或者當無法加載一個或多個幀時在幀集上觸發;

select：當使用者在文本框中選擇一個或多個字元時觸發（<輸入>或<文本區域>）;

調整大小：當視窗或架構的大小發生變化時，在視窗或架構上觸發;

scroll：當使用者滾動時，在帶有滾動條的元素上觸發;

這些事件，在 DOM2 事件中，除了 DOMActive 事件之外，其他所有事件都是 HTML 事件，是以在确定浏覽器是否支援 DOM2 事件時，最後進行檢測，例如：

确定浏覽器是否支援 DOM3 級事件，例如：

此外，這些事件中的大多數都與Windows對象或窗體控件相關，是以有些地方将這些事件稱為Windows事件，因為大多數這些事件都與浏覽器視窗相關。

load load事件：當頁面完全加載（包括所有圖像，Javascript檔案和CSS檔案等外部資源）時，它會觸發Windows對象加載事件，這也是Javascript中最常用的事件;

有兩種方法可以定義 onload 事件處理程式：

将 onload 屬性添加到<正文>元素;

通常，在視窗中發生的任何事件都可以在<正文中通過适當的屬性>元素指定，因為無法在HTML中通路視窗元素;

圖像還可以觸發加載事件，無論是在DOM中還是在HTML圖像元素中;

藝術

建立新的 <img > 元素時，可以為其配置設定一個事件處理程式，您隻需要指定要下載下傳的 src 屬性，而不必将其添加到 DOM 樹中，例如：

您還可以使用 DOM0 級圖像對象實作，例如：

還有一些元素以非标準方式支援加載事件;在标準浏覽器中，<腳本>元素也會觸發加載事件，以确定是否加載了動态加載的js檔案，并在下載下傳開始之前設定了<script>的scr屬性并将其添加到文檔中;

此時，事件對象的目标和目前目标或 srcElement 引用是<腳本>節點;

IE8和以下浏覽器不支援<腳本>加載元素上的事件，但上面的代碼不會引發異常;

浏覽器還支援<連結>元素上的加載事件，例如：

與<script>類似，請指定其 hef 屬性，并在下載下傳之前将其添加到文檔中。

解除安裝事件：在頁面完全解除安裝後觸發，或從一個頁面切換到另一個頁面，或者重新整理操作也觸發解除安裝事件，例如：

抛出異常：被阻止警報解除安裝，即頁面被阻止，并且在解除安裝事件進行中，不允許阻止，例如彈出視窗，可能導緻阻止;

解除安裝事件功能：

解除安裝事件的事件對象僅包含目标（或 srcElement）屬性，值為 document;

解除安裝事件時的狀态應為：

所有資源仍然存在（圖像、iframe 等）

并非對所有最終使用者資源都可見;

接互無效（視窗打開、報警、确認等，可導緻阻塞） ;

錯誤不會停止解除安裝文檔的過程;

解除安裝事件是短暫的，隻有在所有東西都解除安裝後才會觸發，是以不适合處理正常代碼，通常取消（或清除）頁面上的對象引用以避免記憶體洩漏;

示例：計算頁面停留的時間長度，例如：

此外，解除安裝事件不會冒泡，也無法取消;

類似地，DOM2級事件指定解除安裝事件應該在<主體>元素上觸發，而不是在Windows對象上觸發，但所有浏覽器都在Windows上實作解除安裝事件;

error event：window.onerror屬性看起來像一個事件處理程式，并在Javascript出錯時觸發它，但它不是一個真正的事件處理程式，因為它的參數不是事件對象，而是5個參數，通過這些參數可以獲得詳細的錯誤資訊;

消息：描述錯誤的錯誤消息;

URL：引發錯誤的 Javascript 所在的文檔的 URL;

行：文檔中發生錯誤的行數;

列：發生錯誤的列數;

錯誤：錯誤對象，此錯誤也稱為全局錯誤對象;

但是，如果使用 DOM2 級事件處理程式，則參數是事件對象;

類從 Event 類繼承，并定義以下屬性：

消息：隻讀，傳回所發生錯誤的說明;

檔案名：隻讀，包含發生錯誤的腳本文本的URL;

lineno：隻讀，發生錯誤的行号;

冒号：隻讀，發生錯誤的列号;

錯誤：隻讀，錯誤發生時引發的錯誤對象;

這五個屬性也對應于windows.onerror屬性的五個參數;

如果是圖檔的一個單一事件，則為真實事件，其中隻有一個參數，即對象;

中止事件：當資源的負載中止時，觸發該事件;

調整大小事件：當浏覽器視窗調整大小時，觸發調整大小事件，該事件在視窗上觸發;

在标準浏覽器中，事件對象具有目标屬性，值是Windows對象，但IE不提供任何屬性;

浏覽器大小變化1像素會觸發調整大小事件，然後在更改時重複該事件;

當視窗最大化或最小化時，也會觸發調整大小事件，但有些浏覽器在最大化或最小化時會觸發事件兩次或更多次，這可以使用setTimeout（）來解決，這是為了延遲某些代碼的執行，例如：

示例：随視窗大小而變化，例如：

例：

調整大小事件目前隻能在Windows對象上注冊，它不支援在DOM元素上注冊，如果要監聽調整大小的事件的DOM元素，最好的解決方案是使用自定義事件;

scroll事件：雖然它發生在Windows對象上，但它實際上代表了頁面中相應元素的變化;

事件對象不提供與滾動相關的資訊，而隻是一個普通的 Object 對象;

在混合模式下，可以通過<正文的 scrollLeft 和 scrollTop 元素來監視此更改>元素，在标準模式下，通過< html > 元素來反映;

與調整大小事件類似，滾動事件在文檔滾動活動期間反複觸發，是以在滾動事件處理程式中保持代碼盡可能簡單;

滾動事件示例：

滾動事件也可以在Thelement元素上注冊;

事件穩定（反跳）和油門）：

防止事件頻繁觸發;

穩定：高頻事件觸發後n秒僅執行一次，n秒内高頻事件再次觸發時重新計算時間;

在事件穩定中，清除計時器的計時至關重要，所有計時器必須在生成新計時器後清除，并且一次不執行目标函數;

示例：輸入框驗證

油門：穩定是多次觸發事件，目标函數隻執行一次，無論觸發這些事件需要多長時間，而油門在一定時間内隻執行一次，稀釋了函數的執行頻率，進而達到目标函數執行緩慢的目的;

使用 setTimeout（）：

使用 setInterval（）：

将事件處理程式放在 setInterval（） 函數中，如果發生了滾動事件，則每隔一段時間監視一次，然後執行它，而滾動事件隻是更改滾動的值，不會影響性能，例如：

使用時間戳：

使用交換機：

設定一個開關，一次隻能有一個觸發器執行，并将執行設定定時執行一段時間，執行完成後再解鎖;

比較兩者：

節流在一定時間内，目标函數可以執行一次，限制目标函數的執行頻率，無論事件觸發多少次;

穩定是多次觸發事件，目标函數隻執行一次，無論觸發這些事件需要多長時間;

油門功能限制了目标函數的執行頻率，具有連續變化的效果，适用于注意變化過程的操作，可以調整目标功能的執行頻率以使更改更流暢，例如動畫，更改視窗以執行某些操作等，常用的事件大小調整， 滾動、滑鼠輪、觸摸移動、滑鼠懸停等

防抖功能适用于較多關注操作結果，較少關注操作過程，常見事件有輸入、鍵控等;

焦點事件焦點活動：

當頁面元素獲得或失去焦點時，或者當某些對象調用 focus（） 和 blur（） 方法時，将觸發焦點事件;

有六個焦點事件：

模糊：當元素失去焦點時觸發，事件不會冒泡;

焦點：當元素獲得焦點時觸發，并且事件不會冒泡;

DOMFocusIn：當元素獲得焦點時觸發，事件等效于HTML事件焦點，但它會冒泡;

DOMFocusOut：當一個元素失去焦點時觸發，事件是HTML事件模糊等效物，但它會冒泡;

Focusin：當元素獲得焦點時觸發，事件等效于HTML事件焦點，但它會冒泡;

聚焦：當元素失去焦點時觸發，事件是HTML事件模糊等效物，但它會冒泡;

要确定您的浏覽器是否支援這些事件，您可以檢測：

可以獲得焦點事件的元素通常是指視窗或窗體控件或超連結或可編輯元素，稱為可聚焦元素;

這個類别中最重要的兩個事件是焦點和模糊，這兩者在Javascript的早期都得到了所有浏覽器的支援，而這兩個事件的最大問題是它們沒有冒泡，是以出現了IE的focusin和focusout以及Opera的DOMFocusIn和DOMFocusOut是兩對事件， 後來，IE方法被DOM3事件作為标準;

焦點事件類：

表示與焦點相關的事件類，繼承自 UIEvent 類;

它隻添加了一個屬性Target來表示事件的相關目标，但在實際應用中，例如切換浏覽器頁籤标簽，出于安全原因，所有浏覽器都傳回null;

當焦點從頁面中的一個元素移動到另一個元素時，将依次觸發以下事件：

模糊觸發在失去焦點的元素上，焦點對失去焦點的元素觸發，DOMFocusOut在失去焦點的元素上觸發，焦點在獲得焦點的元素上觸發，domFocusIn觸發在獲得焦點的元素上觸發;

其中，模糊、DOMFocusOut和焦點的事件目标是失去焦點的元素，而焦點的事件目标、DOMFocusIn和焦點元素;

此外，如果同時注冊了 focusin 和 DOMFocusIn 或 focusout 和 DOMFocusOut，則在 IE 中将僅觸發 focusin 和 focusout;

此外，除了焦點和模糊事件之外，其他事件隻能通過 DOM2 級别的事件添加，例如：

HTML 事件處理支援聚焦和聚焦事件，但 FF 除外;

小型應用：更改文本框樣式，例如：

Focusin 和 Focussout 事件正在冒泡，是以您可以使用事件代理，例如：

示例：驗證資料，例如：

或者使用 focus（） 和 blur（） 方法，例如：

示例：一個 HTML 編輯器;

當使用者按 Enter 鍵或失去焦點時，<文本區域>更改回< div >，其内容在< div >中變為 HTML;