淺談Javascript事件類比

這就意味著會有適當的事件冒泡，並且瀏覽器會執行分配的事件處理常式。這種能力在測試web應用程式的時候，是非常有用的，在DOM 3級規範中提供了方法來類比特定的事件，IE9 chrome FF Opera 和 Safari都支援這樣的方式，在IE8及以前的辦法的IE瀏覽器有他自己的方式來類比事件
a)Dom 事件類比
　　可以通過document上的createEvent()方法，在任何時候建立事件對象，此方法只接受一個參數，既要建立事件對象的事件字串，在DOM2 級規範上所有的字串都是複數形式，在DOM 3級事件上所有的字串都採用單數形式，所有的字串如下：
　　UIEvents：通用的UI 事件，滑鼠事件鍵盤事件都是繼承自UI事件，在DOM 3 級上使用的是 UIEvent。
　　MouseEvents：通用的滑鼠事件，在DOM 3 級上使用的是 MouseEvent。
　　MutationEvents：通用的突變事件，在DOM 3 級上使用的是 MutationEvent。
　　HTMLEvents：通用的HTML事件，在DOM3級上還沒有等效的。
注意，ie9是唯一支援DOM3級鍵盤事件的瀏覽器，但其他瀏覽器也提供了其他可用的方法來類比鍵盤事件。
一旦建立了一個事件對象，就要初始化這個事件的相關資訊，每一種類型的事件都有特定的方法來初始化，在建立完事件對象之後，通過dispatchEvent()方法來將事件應用到特定的dom節點上，以便其支援該事件。這個dispatchEvent()事件，支援一個參數，就是你建立的event對象。
b)滑鼠事件類比
　　滑鼠事件可以通過建立一個滑鼠事件對象來類比（mouse event object），並且授予他一些相關資訊，建立一個滑鼠事件通過傳給createEvent（）方法一個字串"MouseEvents"，來建立滑鼠事件對象，之後通過iniMouseEvent()方法來初始化返回的事件對象，iniMouseEvent()方法接受15參數，參數如下：
　　type string類型 ：要觸發的事件類型，例如‘click'。
　　bubbles Boolean類型：表示事件是否應該冒泡，針對滑鼠事件類比，該值應該被設定為true。
　　cancelable bool類型：表示該事件是否能夠被取消，針對滑鼠事件類比，該值應該被設定為true。
　　view 抽象視圖：事件授予的視圖，這個值幾乎全是document.defaultView.
　　detail int類型：附加的事件資訊這個初始化時一般應該預設為0。
　　screenX int類型 ： 事件距離螢幕左邊的X座標
　　screenY int類型 ： 事件距離螢幕上邊的y座標
　　clientX int類型 ： 事件距離可視地區左邊的X座標
　　clientY int類型 ： 事件距離可視地區上邊的y座標
　　ctrlKey Boolean類型 ： 代表ctrol鍵是否被按下，預設為false。
　　altKey Boolean類型 ： 代表alt鍵是否被按下，預設為false。
　　shiftKey Boolean類型 ： 代表shif鍵是否被按下，預設為false。
　　metaKey Boolean類型： 代表meta key 是否被按下，預設是false。
　　button int類型： 表示被按下的滑鼠鍵，預設是零.
　　relatedTarget (object) ： 事件的關聯對象.只有在類比mouseover 和 mouseout時用到。

值得注意的是，initMouseEvent()的參數直接與event對象相映射，其中前四個參數是由瀏覽器用到，只有事件處理函數用到其他的參數，當事件對象作為參數傳給dispatch()方式，target屬性將會自動被賦上值。下面是一個例子， 複製代碼 代碼如下:　　var btn = document.getElementById("myBtn");
　　var event = document.createEvent("MouseEvents");
　　event.initMouseEvent("click", true, true, document.defaultView, 0, 0, 0, 0, 0,false, false, false, false, 0, null);
　　btn.dispatchEvent(event);

在DOM實現的瀏覽器中，所有其他的事件都包括dbclick，都可以通過相同的方式來實現。
c）鍵盤事件類比
　　值得注意的是鍵盤事件已經從DOM2級事件中移出了，起初在DOM2級事件的草案版中，鍵盤事件是作為草案的一部分的，但在最終版被移出了，FF已經實現了草案版中的鍵盤事件，值得注意的是在DOM3級事件中實現的鍵盤事件與DOM2級事件草案版中的鍵盤事件還是存在很大差異的。
在dom3級事件中建立一個鍵盤事件對象是通過createEvent()方法，並傳入KeyBoardEvent字串作為參數，對返回的event對象，調用initKeyBoadEvent()方法初始化，初始化鍵盤事件的參數有以下幾個：
　　type (string) - 要觸發的事件類型,例如"keydown".
　　bubbles (Boolean) — 代表事件是否應該冒泡.
　　cancelable (Boolean) — 代表事件是否可以被取消.
　　view (AbstractView) — 被授予事件的是圖. 通常值為：document.defaultView.
　　key (string) — 按下的鍵對應的code.
　　location (integer) — 按下鍵所在的位置. 0 ：預設鍵盤, 1 左側位置, 2 右側位置, 3 數字鍵台區, 4 虛擬鍵盤區, or 5 遊戲手柄.
　　modifiers (string) — 一個有空格分開的修飾符列表.
　　repeat (integer) — 一行中某個鍵被按下的次數.
請注意的是，在DOM3事件中，費掉了keypress事件，因此按照下面的方式，你只能類比鍵盤上的keydown 和 keyup事件。 複製代碼 代碼如下:　　var textbox = document.getElementById("myTextbox"),event;
　　　　if (document.implementation.hasFeature("KeyboardEvents", "3.0")){
　　　　　　event = document.createEvent("KeyboardEvent");
　　　　　　event.initKeyboardEvent("keydown", true, true, document.defaultView, "a",0, "Shift", 0);
　　　　}
　　　　textbox.dispatchEvent(event);

在FF下，允許你通過使用document.createEvent('KeyEvents'),這種方式來建立鍵盤事件，初始化的方法為initKeyEvent()，這個方法接受10個參數，
　　type (string) — 要觸發的事件類型,例如"keydown".
　　bubbles (Boolean) — 代表事件是否應該冒泡.
　　cancelable (Boolean) — 代表事件是否可以被取消.
　　view (AbstractView) — 被授予事件的是圖. 通常值為：document.defaultView.
　　ctrlKey (Boolean) — 代表ctrol鍵是否按下. 預設 false.
　　altKey (Boolean) — 代表alt鍵是否按下. 預設 false.
　　shiftKey (Boolean) — 代表shift鍵是否按下. 預設 false.
　　metaKey (Boolean) — 代表meta鍵是否按下. 預設 false.
　　keyCode (integer) — 鍵按下或釋放時鍵所對應的鍵碼. 預設是0；
　　charCode (integer) — 按下的鍵的字元所對應的ASCII code.是共keypress事件使用的 預設是0.
D)類比其他事件
滑鼠事件和鍵盤事件是在瀏覽器中最長被類比的事件，，但是某些時候同樣需要類比突變事件和HTML事件。可以用createEvent('MutationEvents'),來建立一個突變事件對象，可以採用initMutationEvent()來初始化這個事件對象，參數包括type, bubbles, cancelable, relatedNode, prevValue,
newValue, attrName, 和attrChange.可以採用下面的方式來類比一個突變事件：
　　var event = document.createEvent('MutationEvents');
　　event.initMutationEvent("DOMNodeInserted", true, false, someNode, "","","",0);
　　target.dispatchEvent(event);
對於HTML事件，直接上代碼。
　　var event = document.createEvent("HTMLEvents");
　　event.initEvent("focus", true, false);
　　target.dispatchEvent(event);
對於突變事件和HTML事件是很少在瀏覽器中用到，因為他們收應用程式的限制。
E)定製DOM事件
在DOM3級事件中定義了一類事件稱之為 custom event，我稱之為客戶事件，客戶事件不會原生的被dom觸發，而是直接提供，以至於開發人員可以建立他們自己的事件，你可以建立一個自己的客戶事件，通過調用createEvent('CustomEvent'),對返回的事件對象調用，initCustomEvent()方法，其中傳遞四個參數type，bubbles，cancelable，detail。ps:小弟對這部分理解有限，在這裡只是拋磚引玉。
F）IE中的事件類比
從IE8，以及更早版本的IE，都在模仿DOM類比事件的方式：建立事件對象，初始化事件資訊，之後觸發事件。當然IE在完成這幾個步驟的過程是不同的。
首先不同於dom中建立event對象的方法，IE採用document.createEventObject()方法，並且沒有參數，返回一個通用的事件對象，接下來要對返回的event對象賦值，此時ie並沒有提供初始化函數，你只能採用物理方法一個一個的賦值，最後在目標元素上調用fireEvent()方法，參數為兩個：事件處理的名稱和建立的事件對象。當fireEvent方法被調用的時候，event對象的srcElement和type屬性將會被自動賦值，其他將需要手動賦值。請看下面的例子： 複製代碼 代碼如下:　　var btn = document.getElementById("myBtn");
　　var event = document.createEventObject();
　　event.screenX = 100;
　　event.screenY = 0;
　　event.clientX = 0;
　　event.clientY = 0;
　　event.ctrlKey = false;
　　event.altKey = false;
　　event.shiftKey = false;
　　event.button = 0;
　　btn.fireEvent("onclick", event);

　　這個例子建立了一個事件對象，之後通過一些資訊初始化該事件對象，注意事件屬性的賦值是無序的，對於事件對象來說這些屬性值不是很重要，因為只有事件控制代碼對應的處理函數（event handler）會用到他們。對於建立滑鼠事件、鍵盤事件還是其他事件的事件對象之間是沒有區別的，因為一個通用的事件對象，可以被任何類型的事件觸發。
　　值得注意的是，在Dom的鍵盤事件類比中，對於一個keypress類比事件的結果不會作為字元出現在textbox中，即使對應的事件處理函數已經觸發。
　　與DOM事件類比相比，個人覺得IE的事件類比更容易讓人記憶和接受，統一的事件模型可以帶來一些便捷。