第60節 HTML5事件和事件委托-JavaScript-零點程式員-王唯

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

DOM規範不包括所有浏覽器支援的事件，許多浏覽器實作了HTML5後來支援的自定義事件。

上下文菜單（上下文菜單）事件：

Win95在PC應用程式中引入的上下文菜單的概念，即由滑鼠右鍵調用或按下鍵盤上的菜單鍵時調用的菜單，後來被引入Web域;提供自定義菜單，以便開發人員可以取消預設的上下文菜單;

上下文菜單事件是滑鼠事件類型，是以其事件對象包含與滑鼠位置相關的所有屬性;

事件正在冒泡，是以您可以為文檔配置設定一個事件處理程式，以處理頁面上的所有此類事件。

上下文菜單事件通常用于顯示自定義上下文菜單，而 onclick 事件處理程式用于隐藏菜單。

解除安裝前事件：

當浏覽器視窗關閉或重新整理時，事件被觸發，事件應該在windows對象上注冊，當事件被觸發時，目前頁面不會直接關閉，你可以用它來取消解除安裝并繼續使用原來的頁面，以便開發人員在頁面解除安裝之前阻止此操作， 但并沒有完全取消事件，意圖是将控制權交給使用者，它會顯示一條消息，通知使用者目前頁面将被解除安裝，詢問使用者該頁面是否真的要關閉，由使用者決定;

事件沒有冒泡;

Windows.alert（）、window.confirm（） 和 windows.prompt（） 方法不能在此事件中調用，因為對于 beforeunload 和 unload 事件，需要事件處理程式來阻止内部的目前線程，并且這些方法阻塞目前線程，是以 H5 規範明确指出，在 beforeunload 和 unload 中直接忽略對這些方法的調用;

為了顯示對話框并詢問使用者是否真的要離開頁面，應該在事件處理程式中根據規範調用 preventDefault（） 方法，但并非所有浏覽器都遵循此規範，例如：

IE 顯示一個預設對話框（是否确實要離開此頁面？）。留下這張臉/留在此頁面上），但其他浏覽沒有響應;

如果要實作自定義提示，可以讓事件處理程式傳回一個字元串，或者将 event.returnValue 的值設定為要顯示的字元，例如：

IE 顯示該對話框并包含傳回的字元串，但其他浏覽器不支援該字元串，其他浏覽器必須将其作為函數值傳回，例如：

示例：自動儲存資料：

在解除安裝事件之前觸發之前解除安裝;

通常，有些業務是在使用者離開頁面之前執行的，這些業務用于在未加載之前的事件，例如記錄使用者停留時間的業務，包括在GA等應用程式中用于頁面通路統計資訊：

DOMContentLoaded 事件：

當加載頁面上的所有内容時，都會觸發視窗加載事件，但是此過程可能會花費太長時間，因為有太多的外部資源需要加載，并且在形成完整的DOM樹後觸發doMContentLoaded事件，而無需等待圖像，JS檔案，CSS檔案或其他資源下載下傳;

使用此事件，您可以将事件處理程式添加到文檔或視窗;

事件對象是一種事件類型，它不提供任何其他資訊，也可以在 Windows 對象上注冊，其目标是文檔;

事件總是在加載事件之前觸發，是以事件的目的是支援在頁面下載下傳中盡早添加事件處理程式，以便使用者可以盡早與頁面進行互動;

IE8 和以下浏覽器不支援此事件，您可以在頁面加載期間設定 0 毫秒的逾時調用：在頁面下載下傳和重構期間隻有一個 js 程序，是以在程序結束時會立即觸發逾時調用 不能保證在所有環境中都會觸發加載事件， 如：

還有另外兩個選項：

一種是建立一個空的腳本标簽，該屬性具有延遲，然後在onreadystatechange完成時觸發DOMContentLoaded;

一種是通過調用doScroll（'left'）的原則來判斷DOMContentLoaded，基本思想是通過反複嘗試執行來檢測document.documentElement.doScroll（"left"），因為在建立DOM樹之前調用doScroll會抛出一個錯誤，如果沒有抛出任何錯誤，則意味着DOM已準備就緒;

另一個選項：

藝術

就緒狀态更改就緒狀态更改事件：

IE為DOM文檔的某些部分提供了一個readystatechange事件，該事件旨在提供有關文檔或元素的加載狀态的資訊;

支援該事件的每個對象都有一個 readyState 屬性，該屬性可能包含以下五個值之一。

未初始化（未初始化）：對象存在但尚未初始化;

load：對象正在加載資料;

已加載（加載已完成）：對象完全加載資料

互動式：您可以操作對象，但尚未完全加載;

完成：對象已加載;

并非所有對象都經曆事件的多個階段，即如果一個階段不适用于對象，則該對象完全有可能跳過該階段;

對于文檔，有三個階段：加載、互動式和完成，例如：

當 readyState 狀态為"互動式"時觸發的 readystatechange 事件與 DOMContentLoaded 事件大緻在同一時間發生;

模拟 domContentLoaded 事件：

當 readyState 值為完成時，加載事件的時間大緻相同，但始終在加載事件之前;

模拟加載事件，例如：

在互動式和完成之間，您可以執行DOM，或做一些準備工作以加快頁面的加載速度，例如：

但是，互動式互動階段可能早于或晚于完成完成階段，這并不能確定順序，是以為了盡可能提前，有必要同時檢測互動和完成階段;

盡管可以使用 readystatechange 非常密切地模拟 DOMContentLoaded 事件，但它們本質上是不同的。

在極少數情況下，加載事件和 readystatechange 事件無法預測兩個事件的觸發順序，并且如果頁面上有大量資源，則 readystatechange 可能僅在 onload 事件之後觸發;

示例：DOM 通過 load、readystatechange 和 DOMContentLoaded 事件準備就緒，如果是這樣，可以執行回調函數;

在IE10下面，<腳本>和<連結>元素也會觸發一個readystatechange事件，該事件可用于确定是否已加載外部JS和CSS檔案;

此外，readystatechange事件存在于其他API中，例如XMLHttpRequest;

示例：包裝 whenReady（） 函數以偵聽 DOMContentLoaded 和 readystatechange 事件，例如：

哈希更改事件：

是 HTML5 中的一個新事件，用于在 URL 的參數清單（即所有字元串在"

哈希更改事件處理程式必須添加到Windows對象中，然後URL參數清單在更改後立即調用它;

哈希更改事件類：

表示當 URL 中的片段辨別符更改時觸發的更改事件;

HashChangeEvent 對象包含兩個附加屬性：舊 URL 和新 URL，它們儲存參數清單更改前後的完整 URL（即，舊 URL 在跳轉之前儲存 URL，新 URL 儲存即将跳轉的新 URL），例如：

除IE7及以下版本外，所有浏覽器都支援哈希更改事件;

雖然上面的 IE7 版本支援哈希更改事件，但 HashChangeEvent 類被視為普通 Event 類，是以不支援 HashChangeEvent 對象的這兩個屬性，但可以使用循環對象确定目前參數清單，例如：

檢測浏覽器是否支援哈希更改事件，例如：

如果IE8在IE7文檔模式下運作，或者IE7下面的浏覽器正在運作，即使該功能無效，它也會傳回true，并且可以采取更安全的檢測方法：

例：

HTML5還具有大量其他事件，例如音頻和視訊多媒體事件，拖放事件，曆史管理事件等。

還有裝置事件（即移動裝置），包括觸摸和手勢事件;

記憶體和性能：

在JS中，添加到頁面的事件處理程式的數量将直接關系到頁面的整體性能，例如：每個函數都是一個對象，會消耗記憶體，記憶體中的對象越多，性能越差，必須提前指定所有導緻dom通路的事件處理程式，會延遲整個頁面的互動準備時間;

活動代表：

事件委托利用事件冒泡來指定一個事件處理程式來管理特定類型的所有事件;

使用事件委托，您隻需要在 DOM 樹中盡可能高的級别添加事件處理程式，例如：

如果可能，請考慮向文檔對象添加事件處理程式，以處理頁面上發生的特定類型的事件，以便冷杉的優點是：

文檔對象可快速通路：事件處理程式可以在生命周期中的任何時間點添加到頁面（無需等待DOMContentLoaded或加載事件）;

在頁面上設定事件處理程式花費的時間更少，僅添加一個事件處理程式需要較少的DOM引用，并且花費的時間更少;

整個頁面占用的内容空間更少，可以提高整體性能;

最适合使用事件委派技術的事件包括單擊、滑鼠按下、滑鼠懸停、按鍵、鍵控和按鍵;

删除事件處理程式：

每當将事件處理程式配置設定給元素時，都會在正在運作的浏覽器代碼和支援頁面互動的JS代碼之間建立連接配接;

較舊的"懸空事件處理程式"的存在也是Web應用程式中記憶體和性能問題的主要原因。

在這兩種情況下，這都可能導緻上述問題，第一種是從文檔中删除具有事件處理程式的元素時，這可能是通過純 domicore 操作，例如使用 moveeChid（） 和 repleceChild（） 方法，或者用 innerHTML 替換頁面的一部分，其中最初添加到元素的事件處理程式很可能不會被垃圾回收;

在設定 div 的 innerHTML 屬性之前删除按鈕的事件處理程式;

還有一種情況是使用事件委托，例如，如果您事先知道可以用innerHTML等替換頁面的一部分，那麼不要直接在本節中的元素上注冊事件處理程式，而是在不會被替換的更進階别元素上注冊事件處理程式;

請注意，删除事件處理程式中的目标元素還可以防止事件冒泡，并且目标元素是文檔中事件冒泡的先決條件;

解除安裝頁面時，如果沒有幹淨的事件處理程式，它們将卡在記憶體中，每次加載頁面然後解除安裝時，記憶體中剩餘的對象數量都會增加，尤其是IE;

是以，在解除安裝頁面之前，請通過 onunload 事件處理程式删除所有事件處理程式;