一：創建DOM事件的方法？
模擬事件的步驟：
- 創建event對象，它接受四種參數：
- UIEvents ： 一般的UI事件。其實鼠標和鍵盤事件都繼承自UI事件，DOM3級中是UIEvent；
- MouseEvents：一般化的鼠標事件。DOM3級中的是MouseEvent；
- MutationEventents：檢測DOM變動的事件。DOM3中是MutationEvent。
- HTMLEvents ：一般化的HTML事件。
- 對事件有關的信息進行初始化，使用initMouseEvent()初始化，這個方法接受15個參數，含義如下：
- type：表示要觸發的事件類型，(click,mouse等);
- bubbles(boolean)：表示事件是否冒泡；
- cancelable(boolean)：表示事件是否可以取消；
- view(abstract)：與事件相關聯的視圖。
- detail(整數)：與事件有關的詳細信息。這個值一般只有事件處理承認那個徐使用，通常設置0；
- screenX(整數)：事件相對於屏幕的X的座標；
- screenY(整數)：事件相對於屏幕的Y的座標；
- clientX(整數)：事件相對於視口的X座標；
- clientY(整數)：事件相對於視口的Y座標；
- ctrlKey(boolean)：是否按下了Ctrl鍵；
- altKey(boolean)：是否按下了alt鍵；
- shiftKey(boolean)：是否按下了shift鍵；
- metakey(boolean)：是否按下了meta鍵；
- button(整數)：是否就按下了哪一個鼠標鍵。默認值0；
- relatedTarget(對象)：表示與事件相關的對象。在模擬mouseover和mouseout的時候使用。
前四個參數比較重要，觸發事件的時候需要用到，剩下的參數在處理事件的時候纔會用到；
- 使用dispatchEvent()方法進行觸發事件。只需要把event對象傳入dispatchEvent()中就可以觸發。
例子如下：
<body>
<a href="http://www.baidu.com" id="baidu"></a>
</body>
<script>
var baidu = document.getElementById("baidu");
var events = document.createEvent("MouseEvents");
console.log(events.initMouseEvent())
events.initMouseEvent("click", true, true, document.defaultView, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
baidu.dispatchEvent(events);
</script>二：模擬鼠標事件？
和模擬鼠標事件一樣，DOM3級規定，調用createEvent()並傳入”KeyboardEvent”就可以創建一個鍵盤事件。接受8個參數：
- type：表示觸發的事件類型(keydown)；
- bubbles(Boolean)：事件是否應該冒泡；
- cancelable(boolean)；是否可以取消默認行爲；
- view(abstract)：與事件相關聯的視圖。
- key(布爾值)：按下的鍵的鍵碼；
- location：表示按下了哪個區域的鍵。0 表示默認主鍵盤，1表示左，2表示右鍵，3表示數字，4表示移動設備，5表示手柄。
- modifier：空格分隔的修改鍵列表，如“shift”；
- repeat：在一行中按了這個鍵多少次。
<body>
<input type="text" id="shifta" autofocus>
</body>
<script>
var shifta = document.getElementById("shifta");
if(document.implementation.hasFeature("KeyboardEvents","3.0")){
events = document.createEvent("KeyboardEvent");
events.initKeyboardEvent("keydown",true,true,document.defaultView,'a',0,'shift',0);
}
shifta.dispatchEvent(events)但是在火狐裏面想要模擬這個事件就需要修改create.Event()裏面的參數，變爲：KeyEvents；還要修改的是初始化事件的對象initKeyEvent();代碼如下所示：
var shifta = document.getElementById("shifta");
events = document.createEvent("KeyEvents");
events.initKeyboardEvent("keypress",true,true,document.defaultView,false,false,false,false,65,65);
shifta.dispatchEvent(events);三：創建自定義DOM事件
創建自定義事件有三個步驟：
- 調用createEvent(“CustomEvent”)創建對象；
- 用一個名爲initCustomEvent()的方法初始化事件；
觸發事件。
其中initCustomEvent(）方法接收四個參數。type：事件類型；
- bubble(boolean)：表示事件是否冒泡；
- cancelable(boolean)：表示事件是否可以取消；
- detail(對象)：任意值，保存在event對象的detail對象中。
創建對象的代碼如下：
var mydiv = document.getElementById('myDiv');
mydiv.addEventListener('myevent',function(event){
console.log(event.detail);
},false);
if(document.implementation.hasFeature("CustomEvents","3.0")){
event = document.createEvent("CustomEvent");
event.initCustomEvent("myEvent",true,false,"hello world");
console.log(event)
mydiv.dispatchEvent(event);
}四：IE9以前事件模擬
IE創建新的事件與DOM中的方法不一樣，也分爲三個步驟：
- createEventObject()創建對象；
- 初始化事件對象都是在event對象上直接添加，例如：event.screen = 0;
- 觸發事件用fireEvent()方法。
模擬click的方法如下：
// IE觸發事件方法
var aa = document.getElementById('a1');
//創建事件對象
var event = document.createEventObject();
//初始化事件對象
event.screenX = 100;
event.screenY = 100;
event.clientX = 200;
event.clientY = 200;
event.ctrlKey = false;
event.altKey = false;
event.shiftKey = false;
event.button = 0;
//觸發事件
a.fireEvent("onclick",event);