模擬事件
瀏覽器事件的相關信息有：Event對象、事件類型、事件處理程序。那麼模擬出的事件也應該有這些信息。
DOM中的事件模擬
模擬事件的步驟：
第一步：通過document.createEvent()方法創建event對象。
可以在document對象上使用createEvent()方法創建event事件對象。該方法接收一個參數，表示事件類型的字符串。DOM2中字符串是以複數表示的，在DOM3中字符串是以單數表示。表示事件類型的字符串有：DOM2中表示事件類型的字符串
- UIEvents：UI事件，鼠標事件與鍵盤事件繼承於UI事件。DOM3中是UIEvents
- MouseEvents：鼠標事件。DOM3中是MouseEvent
- MutationEvents：變動事件
- HTMLEvents：HTML事件，沒有對應的DOM3級
第二步：初始化創建的event對象。使用initMouseEvent、initKeyboardEvent、initMutationEvent並加上與事件有關的信息分別初始化鼠標、鍵盤、變動事件對象。
與初始化事件對象有關的常見屬性有：
- type：表示觸發事件的類型
- bubble：表示是否應該冒泡，建議設置爲true。
- cancelable：表示是否只可以取消事件，建議設置爲true。
- view：表示事件視圖。
第三步：使用dispatchEvent()觸發模擬的事件。該方法接收一個參數，該參數就是創建的事件對象。這個方法由頁面中的一個元素調用使用。
模擬鼠標事件
使用createEvent()方法並接收“MouseEvent”參數創建一個鼠標事件對象，該事件對象返回一個initMouseEvent()方法用來初始化事件對象，並傳入與事件相關的參數來初始化事件對象：
- type：觸發事件的類型，如“click”、“dbclick”
- bubble：是否應該冒泡，建議設置爲true。
- cancelable：表示是否可以取消事件，建議設置爲true。
- view：表示事件視圖。設置爲document.defaultView。
- screenX：表示相對於屏幕X座標的位置。
- screenY：表示相對於屏幕Y座標的位置。
- clientX：表示相對於視口X座標的位置。
- clientY：表示相對於視口Y座標的位置。
- ctrlKey：表示是否按下了ctrl鍵，默認爲false。
- altKey：表示是否按下Alt鍵，默認爲false。
- shiftKey：表示是否按下shift鍵，默認爲false。
- metaKey：表示是否按下window鍵，默認爲false。
- button：表示按下了哪一個鼠標按鍵，默認爲0表示鼠標左鍵。
以上這些參數與瀏覽器事件的鼠標事件的event對象包含的屬性一一對應。前4個很重要，經常使用。
下面舉例一個鼠標單擊事件：
<body>
<input id="sub" type="submit" value="鼠標單擊事件">
<script>
var sub = document.querySelector("#sub");
//創建事件對象
var event = document.createEvent("MouseEvents");
//初始化事件對象
event.initEvent("click", true, true, document.defaultView, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
//觸發事件
sub.dispatchEvent(event);
document.onclick = function (e) {
console.log(e.type);
console.log(e.clientX);
console.log(e.button);
}
</script>
</body>
模擬鍵盤事件
使用document.createEvent()方法並傳入參數keyboardEvent可以創建鍵盤事件對象。並用initKeyEvent()方法初始化事件對象。最後使用dispatchEvent()方法觸發事件。
- type：觸發的事件類型，如：“keydown”、"keyup"、"keypress"
- bubble：是否應該冒泡，建議設置爲true。
- cancelable：是否可以取消事件，建議設置爲true。
- view：事件視圖，常用document.defaultView。
- key：表示按下的鍵碼。
- location：表示所按下按鍵在鍵盤上的位置。0表示主鍵盤，1表示左，2表示右，3表示數字鍵盤，4表示移動設備，5表示手柄。
- repeat：表示一行中按下這個鍵多少次。
- modifiers：表示修改鍵列表，如：alt ctrl shift window。
舉例按住"ctrl"鍵的同時按下"b"鍵。
<body>
<input id="sub" type="text">
<script>
var sub = document.querySelector("#sub");
//創建事件對象
var event = document.createEvent("keyboardEvent");
//初始化事件對象
event.initKeyboardEvent("keydown", true, true, document.defaultView, "b", "0", "Ctrl", 0);
//觸發事件
sub.dispatchEvent(event);
document.onkeydown = function (e) {
console.log(e.type);
console.log(e.key);
}
</script>
自定義DOM事件
創建自己的事件，調用creatEvent("CustomEvent")。返回initCustomEvent()方法。
- type
- bubble
- cancelable
- detail：對象，保存在detail屬性中
<body>
<input id="sub" type="submit">
<script>
var sub = document.querySelector("#sub");
//添加事件處理程序
sub.addEventListener("myEvent", function (e) {
console.log(e.type); //myEvent
console.log(e.detail);
});
//創建事件對象
var event = document.createEvent("CustomEvent");
//初始化事件對象
event.initCustomEvent("myEvent", true, true, document.defaultView, "hello world");
//觸發事件
sub.dispatchEvent(event);
</script>
</body>
效果：
IE中的模擬事件
在IE中模擬事件與在DOM中模擬事件有點不同的是：使用document.createEventObject()創建事件對象，這個方法不傳入參數，返回一個通用的event對象。初始化事件對象需要手工添加屬性。最後使用fireEvent()方法觸發事件，這個方法需要傳入兩個參數：事件處理程序名、event對象。
<body>
<input id="sub" type="submit">
<script>
var sub = document.querySelector("#sub");
//添加事件處理程序
sub.attachEvent("onclick", function (e) {
console.log(e.type); //myEvent
console.log(e.key);
});
//創建事件對象
var event = document.createEventObject();
//初始化事件對象
event.clientX = 0;
event.clientY = 0;
event.ctrlKey = false;
event.button = 0;
//觸發事件
sub.fireEvent("onclick", event);
</script>
</body>
