第61節 模拟和自定義事件Event-Web前端開發之-JavaScript-王唯

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

模拟事件：

事件通常由使用者操作或通過其他浏覽器功能觸發，或者javascript可以随時用于觸發特定事件，就像浏覽器建立的事件一樣，即通過Javascript模拟觸發事件;

DOM2級别指定如何模拟特定事件，這是标準浏覽器支援的，IE有自己的模拟事件的方式;

doM 中的事件模拟：

您可以使用 double 對象上的 type 方法建立對象，該對象接受表示要建立的事件類型的類型字元串參數;

type參數隻能傳遞事件子產品中定義的值，在DOM2級别中，所有這些字元串都采用英語複數形式，并且在DOM3級别中變為單數;

事件： 通用事件類;

UI事件：一般的UI事件，滑鼠事件和鍵盤事件繼承自UI事件，DOM3級别是UI事件;

滑鼠事件：一般滑鼠事件，DOM3級别為滑鼠事件;

鍵盤事件：

突變事件：一般DOM更改事件，DOM3級别為突變事件;

HTML事件：一般的HTML事件，沒有對應的DOM3級事件，因為在DOM3事件中，HTML事件被分散到其他類别中;

TextEvents： DOM3 is TextEvent;

自定義事件：自定義事件;

還有其他事件子產品，如SVGEvents，MessageEvent，ProgressEvent，AnimationEvent，TransitionEvent等;

DOM2級事件沒有專門指定鍵盤事件，在DOM3事件中給鍵盤事件規定;

建立事件對象後，還需要使用與事件相關的資訊對其進行初始化;每種類型的事件對象都有一個特殊的方法來傳遞适當的資料，以便它初始化事件對象，但不同類型的方法的名稱各不相同，具體取決于secretEvent（）;

Event 子產品的事件對象可以使用 Event.initEvent（） 方法進行初始化;文法： event.initEvent （type， bubbles， cancelable）;參數： 類型： 定義事件名稱;氣泡：一個布爾值，是否冒泡;可取消：一個布爾值，是否可以取消;

事件子產品及其初始化方法：

UIEvents：event.initUIEvent;

MouseEvents：initMouseEvent;

MutationEvents：initMutationEvent;

HTMLEvents：event.initEvent;

TextEvent：event.initTextEvent;

KeyboardEvent：event.initKeyboardEvent;

CustomEvent：event.initCustomEvent;

這些初始化方法中的參數是不同的，由其事件類型确定，例如：

模拟事件的最後一步是使用 dispatchEvent（） 方法觸發事件，該方法需要傳遞給表示要觸發的事件的事件對象;

事件觸發後，事件可以像正常事件一樣冒泡，正常可以引發相應事件處理程式的執行;

dispatchEvent（） 方法傳回一個布爾值，當事件可取消（可取消為 true）時，該值為 false，并且該事件至少有一個名為 preventDefault（） 的事件處理程式;

如果在調用之前未初始化 dispatchEvent（） 方法，則會引發UNSPECIFIED_EVENT_TYPE_ERR異常，或者如果事件類型為 null 或事件處理程式為空字元串，則會引發未捕獲的異常;

模拟滑鼠事件：

方法建立并傳回一個模拟滑鼠事件的對象，該對象具有一個名為 initMouseEvent（） 的方法，該方法指定有關滑鼠事件的資訊，該事件接受 15 個參數，滑鼠事件中每個典型屬性一個參數，如下所示：

類型（字元串）：表示要觸發的事件的類型（例如：單擊）;

氣泡：訓示事件是否應冒泡;

可取消：表示事件是可以取消的;

抽象視圖：與事件關聯的視圖，幾乎總是設定為 docment.defaultView;

detail：與事件相關的詳細資訊，此值通常僅由事件處理程式使用，但通常設定為 0;

screenX（整數）：事件的X坐标相對于螢幕;

screenY（整數）：事件相對于螢幕的 Y 坐标;

clientX（整數）：事件的 X 坐标相對于視口;

clientY（整數）：事件相對于視口的 Y 坐标;

CtrlKey：是否按Ctrl鍵，預設值為false;

altKey（布爾值）：無論是否按下Alt鍵，預設值為false;

shiftKey：是否按下Shift鍵，預設為false;

元鍵（布爾值）：是否按下元鍵，預設值為false;

button（整數）：按下了哪個滑鼠按鈕，預設為0;

相關目标（對象）：表示與事件相關的對象，該參數僅在模拟滑鼠懸停和滑鼠懸停時使用;

其中，前四個參數對于正确的觸發事件至關重要，其餘所有參數僅用于事件處理程式;

當一個對象被傳遞給 dispatchEvent（） 方法時，該對象的目标屬性會自動設定;

在相容的DOM浏覽器中，也可以以相同的方式模拟其他滑鼠事件，例如dblclick;

模拟鍵盤事件：

DOM3級别聲明可以通過調用createEvent（）并傳入"keyboardEvent"來建立鍵盤事件;

類型（字元串）：表示要觸發的事件的類型;

氣泡：訓示事件是否應冒泡;

可取消：表示事件是可以取消的;

抽象視圖：與事件關聯的視圖。此參數幾乎總是設定為 docment.defaultView;

鍵（字元串）：表示按下的鍵的鍵代碼;

位置：訓示按鍵的位置：0 表示預設主鍵盤，1 表示左側，2 表示右側，3 表示數字鍵盤，4 表示移動裝置（即虛拟鍵盤），5 表示搖桿;

ctrlKey：

altKey：

移位鍵：

元鍵：

重複：您連續按此鍵多少次;

由于 DOM3 級别不促進按鍵事件的使用，是以此技術隻能用于模拟按鍵和鍵控事件，例如：

但是，此參數順序在IE中不正常，但它可以使用公共事件;

首先建立一個泛型事件，然後調用 initEvent（） 方法對其進行初始化，即向事件對象添加鍵盤上特定于事件的資訊（或不添加），例如：

在這裡，您必須使用通用事件，而不是UI事件，因為UI事件不允許向對象添加新屬性;

像這樣的模拟事件會觸發鍵盤事件，但不會向文本框寫入文本，因為無法準确模拟鍵盤事件;

模拟變更事件：

您可以使用createEvent（"MutationEvents"）建立一個包含initMutationEvent（）方法的變量事件對象，該方法接受諸如類型，氣泡，可取消，相關節點，預值，newValue，attrName和attrChange等參數;

其他更改事件也以上述格式建立，隻需要更改參數;

模拟 HTML 事件：

通過 createEvent（"HTMLEvents"），您可以使用對象的 initEvent（） 方法初始化對象;

自定義 DOM 事件：

DOM3級别還定義了"自定義事件"，這些事件不是由DOM本機觸發的，旨在允許開發人員建立自己的事件;

若要建立自定義事件，可以調用 "CustomEvent" 方法，該方法傳回一個名為 initCustomEvent（） 的對象，該對象接收四個參數：

type（字元串）：表示要觸發的事件的類型，例如"keydown";

detail（對象）：儲存在對象的目标屬性中的任何值;

您建立的自定義事件對象可以像其他事件一樣在 DOM 中配置設定，例如：

IE 中的事件模拟：

IE8及以下不支援dom模拟事件，它有一組專用的API，這類似于DOM思維：先建立對象，然後為其指定适當的資訊，然後使用對象觸發事件;

調用 document.createEventObject（） 方法會在 IE 中建立一個 eent 對象，該對象不接受參數并傳回一個通用事件對象 srcElement 和 type 屬性會自動添加到該對象中，其他屬性必須手動添加，并且使用相同的模式來模拟任何 IE 支援的事件;

為事件對象添加的屬性可以是免費的，沒有限制，即使添加的屬性IE不支援也可以，添加的屬性對事件沒有影響，因為隻有事件處理才會使用它們;

同一模式還可以模拟觸發按鍵事件;

與DOM一樣，文本框中不輸出任何字元;

由于滑鼠事件、鍵盤事件和其他事件的事件對象沒有什麼不同，是以可以使用通用對象來觸發任何類型的事件。

自定義事件：

不再建議使用 Document.createEvent（），建議使用各種事件類型的構造函數來建立事件;

事件類：

表示在 DOM 中發生的事件，DOM 是其他類型的事件的基類，包含适用于所有事件的屬性和方法;

構造函數： Event（）， 建立并傳回一個 Event 對象;

EventInit 是可選的，并且是接受以下字段的 EventInit 類型字典對象：

"氣泡"，可選，布爾類型，預設值為false，訓示事件是否冒泡;

"可取消"，可選，布爾類型，預設值為false，訓示是否可以取消事件;

"composed"，可選，布爾類型，預設為false，訓示事件是否會觸發Shadow DOM根節點外的偵聽器;

類型 OfArg 事件類型，即它可以是内置事件或自定義事件;

建立事件後，需要使用 dispatchEvent（）;

注意： 事件 event.isTrusted 屬性可用于區分使用者觸發或腳本觸發;

此外，自定義事件應使用 addEventListener，因為< >僅在内置事件中使用。

IE不支援使用構造函數建立事件，隻能用document.createEvent（）方法替換;

如：

許多内置事件都有預設行為，但對于自定義事件沒有預設行為，但是當調用該方法時，dispatchEvent（） 方法傳回 false，是以該方法在自定義事件中用于特殊目的，例如調用方法，根據該方法，事件處理程式可以發送信号以确定應如何執行以下操作， 如：

例：

常見事件子類：

自定義事件：自定義事件類;

裝置輸入事件：旋轉移動裝置事件類;（例如，擷取事件的旋轉 x、y 和 Z 軸的角度等）

DragEvent：拖放事件類，它們繼承事件類和滑鼠事件類;

錯誤事件： 錯誤事件類;

FocusEvent：表示從 UIEvent 類繼承的與焦點相關的事件類;

鍵盤事件：鍵盤事件類

MouseEvent：滑鼠事件類，繼承自 UIEvent 類;

突變事件：更改事件類;

TouchEvent：Touch Event 類，繼承自 UIEvent 類;

使用者界面事件;

WheelEvent：滑鼠滾輪或類似輸入裝置的事件類;

不同的事件類型具有不同的标準屬性，例如用于滑鼠事件的 clientX 和 clitY，例如：

但是，如果使用事件構造函數（将 MouseEvent 替換為事件），則 clintX 和 clintY 屬性不是其标準屬性，會直接被忽略。

建立自定義事件事件：

例如，将上面示例中的新事件交換為新的 CustomEvent 具有相同的結果，但 CustomEvent 對象具有一個 detail 屬性，您可以使用該屬性傳遞某些資訊，這些資訊可以是任何類型的資料，例如：

您甚至可以直接在 dispatchEvent（） 方法中執行個體化 Event 對象，例如：

建立一個 MouseEvent 事件，文法：事件 s new MouseEvent （typeArg， mouseEventInit）;參數 typeArt 是事件名稱，可選參數 mouseEventInit 是初始化 MouseEvent 的字典對象，其工作方式與上面的 initMouseEvent（） 方法相同，例如：

建立 KeyboardEvent 事件，文法：event- new KeyboardEvent（typeArg，KeyboardEventInit），參數 typeEarg 作為事件名稱，keyboardEventInit 作為字典對象，具有以下值：

"key"，可選，預設為""，對應于keyevent.key的值;

"code"，可選，預設為""，對應于 KeyboardEvent.code 的值;

"location"，可選，預設為 0，無符号長類型，設定 KeyboardEvent.location 的值。

"ctrlKey"，可選，預設 false，布爾類型，設定 KeyboardEvent.ctrlKey 的值。

"shiftKey"，可選，預設 false，布爾類型，設定 KeyboardEvent.shiftKey 的值。

"altKey"，可選，預設 false，布爾類型，設定 KeyboardEvent.altKey 的值。

"metaKey"，可選，預設 false，布爾類型，設定 KeyboardEvent.metaKey 的值。

"repeat"，可選，預設為 false，布爾類型，設定 KeyboardEvent.repeat 的值。

"isComposing"，可選，預設 false，布爾類型，設定 KeyboardEvent.isComposing 的值。

"charCode"，可選，預設為 0，無符号長類型，設定 KeyboardEvent.charCode 的值（已丢棄）。

"keyCode"，可選，預設為 0，無符号長類型，設定 KeyboardEvent.keyCode 的值（丢棄）。

"where"，可選，預設為 0，無符号長類型，設定 KeyboardEvent.with 的值（丢棄）。

KeyboardEventInit字典也可以接受來自UIEventInit和EventInit的字典字段值;

設定 KeyboardEventInit 參數：

自定義事件的工作原理：

事件本質上是一條消息，事件模式是一種稱為觀察者的設計模式，這是一種用于建立松散耦合代碼的技術;

觀察者模式由兩種類型的對象組成：主體和觀察者;主體負責釋出事件，而觀察者通過訂閱這些事件來觀察主體;模式的一個關鍵概念是，主體對觀察者一無所知，也就是說，即使觀察者不存在，它也可以單獨存在并正常運作;

最原始的自定義事件，例如：

自定義事件本質上是一個調用的函數;

最簡單的自定義事件，例如：

簡單事件類：

事件對象可以注冊多個事件，例如：

您還可以修改 dispatchEvent（） 方法以傳遞類似事件的對象，例如：

應用：