《Javascript高級程序設計 (第三版)》第13章 事件

模擬事件

DOM中的事件模擬

能夠在 document 對象上使用 createEvent() 方法建立 event 對象。

1. UIEvents ：通常化的 UI 事件。鼠標事件和鍵盤事件都繼承自 UI 事件。DOM3 級中是 UIEvent 。

2. MouseEvents ：通常化的鼠標事件。DOM3 級中是 MouseEvent 。

3. MutationEvents ：通常化的 DOM 變更事件。DOM3 級中是 MutationEvent 。

4. HTMLEvents ：通常化的 HTML 事件。沒有對應的 DOM3 級事件（HTML 事件被分散到其餘類 別中）。

在建立了 event 對象以後，還須要使用與事件有關的信息對其進行初始化。每種類型的 event 對象都有一個特殊的方法，爲它傳入適當的數據就能夠初始化該 event 對象。不一樣類型的這個方法的名字也不相同，具體要取決於 createEvent() 中使用的參數。模擬事件的最後一步就是觸發事件。這一步須要使用 dispatchEvent() 方法，全部支持事件的DOM 節點都支持這個方法。調用 dispatchEvent() 方法時，須要傳入一個參數，即表示要觸發事件的 event 對象。觸發事件以後，該事件就躋身「官方事件」之列了，於是可以照樣冒泡並引起相應事件處理程序的執行。

• 模擬鼠標事件

建立鼠標事件對象的方法是爲 createEvent() 傳入字符串 "MouseEvents" 。返回的對象有一個名爲 initMouseEvent() 方法，用於指定與該鼠標事件有關的信息。這些參數的含義以下。

1. type （字符串）：表示要觸發的事件類型，例如 "click" 。

2. bubbles （布爾值）：表示事件是否應該冒泡。爲精確地模擬鼠標事件，應該把這個參數設置爲true 。

3. cancelable （布爾值）：表示事件是否能夠取消。爲精確地模擬鼠標事件，應該把這個參數設置爲 true 。

4. view （AbstractView）：與事件關聯的視圖。這個參數幾乎老是要設置爲 document.defaultView 。

5. detail （整數）：與事件有關的詳細信息。這個值通常只有事件處理程序使用，但一般都設置爲 0 。

6. screenX （整數）：事件相對於屏幕的 X 座標。

7. screenY （整數）：事件相對於屏幕的 Y 座標。

8. clientX （整數）：事件相對於視口的 X 座標。

9. clientY （整數）：事件想對於視口的 Y 座標。

10. ctrlKey （布爾值）：表示是否按下了 Ctrl 鍵。默認值爲 false 。

11. altKey （布爾值）：表示是否按下了 Alt 鍵。默認值爲 false 。

12. shiftKey （布爾值）：表示是否按下了 Shift 鍵。默認值爲 false 。

13. metaKey （布爾值）：表示是否按下了 Meta 鍵。默認值爲 false 。

14. button （整數）：表示按下了哪個鼠標鍵。默認值爲 0 。

15. relatedTarget （對象）：表示與事件相關的對象。這個參數只在模擬 mouseover 或 mouseout時使用。

initMouseEvent() 方法的這些參數是與鼠標事件的 event 對象所包含的屬性一一對應的。其中，前 4 個參數對正確地激發事件相當重要，由於瀏覽器要用到這些參數；而剩下的全部參數只有在事件處理程序中才會用到。當把 event 對象傳給 dispatchEvent() 方法時，這個對象的 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);

• 模擬鍵盤事件
  調用 createEvent() 並傳入"KeyboardEvent" 就能夠建立一個鍵盤事件。返回的事件對象會包含一個 initKeyEvent() 方法，這個方法接收下列參數。

1. type （字符串）：表示要觸發的事件類型，如 "keydown" 。

2. bubbles （布爾值）：表示事件是否應該冒泡。爲精確模擬鼠標事件，應該設置爲 true 。

3. cancelable （布爾值）：表示事件是否能夠取消。爲精確模擬鼠標事件，應該設置爲 true 。

4. view （ AbstractView ）：與事件關聯的視圖。這個參數幾乎老是要設置爲 document.defaultView 。

5. key （布爾值）：表示按下的鍵的鍵碼。

6. location （整數）：表示按下了哪裏的鍵。0 表示默認的主鍵盤，1 表示左，2 表示右，3 表示 數字鍵盤，4表示移動設備（即虛擬鍵盤），5 表示手柄。

7. modifiers （字符串）：空格分隔的修改鍵列表，如 "Shift" 。

8. repeat （整數）：在一行中按了這個鍵多少次。

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)

• 模擬其餘事件
  模擬變更事件和HTML 事件。

var event = document.createEvent("HTMLEvents");
event.initEvent("focus", true, false);
target.dispatchEvent(event);

• 自定義 DOM 事件

  自定義事件不是由 DOM 原生觸發的，它的目的是讓開發人員建立本身的事件。要建立新的自定義事件，可調用 createEvent("CustomEvent") 。返回的對象有一個名爲 initCustomEvent() 的方法。

1. type （字符串）：觸發的事件類型，例如 "keydown"。

2. bubbles （布爾值）：表示事件是否應該冒泡。

3. cancelable （布爾值）：表示事件是否能夠取消。

4. detail （對象）：任意值，保存在 event 對象的 detail 屬性中。

var div = document.getElementById("myDiv"),event;
EventUtil.addHandler(div, "myevent", function(event){
    alert("DIV: " + event.detail);
});
EventUtil.addHandler(document, "myevent", function(event){
    alert("DOCUMENT: " + event.detail);
});
if (document.implementation.hasFeature("CustomEvents", "3.0")){
    event = document.createEvent("CustomEvent");
    event.initCustomEvent("myevent", true, false, "Hello world!");
    div.dispatchEvent(event);
}

IE中的事件模擬

調用 document.createEventObject() 方法能夠在 IE 中建立 event對象。(不接受參數，結果會返回一個通用的 event 對象)
目標上調用 fireEvent()方法，這個方法接受兩個參數：事件處理程序的名稱和 event 對象。

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);