DOM中的事件模擬

三個步驟：

首先通過document.createEvent()方法創建event對象，接收一個參數，即表示要創建的事件類型的字符串：

UIEvents（DOM3中的UIEvent）鼠標和鍵盤事件； MouseEvents（DOM3中的MouseEvent）鼠標事件； MutationEvents（DOM3中的MutationEvent）變動事件； HTMLEvents（沒有DOM3中對應的事件）HTML事件；

其次在創建了event對象之后，還需要使用與事件有關的信息對其進行初始化。每種類型的event對象都有一個特殊的方法，為它傳入適當的數據就可以初始化該event對象。用event.init......()此類行的方法。

最后就是觸發事件。這需要使用dispatchEvent()方法，接收一個參數，即表示要觸發的event對象。

模擬鼠標事件

首先創建鼠標事件對象的方法createEvent()傳入MouseEvents，返回的對象的方法initMouseEvent()，接收15個信息：

type（字符串）：事件類型如“click”； bubble（布爾值）：是否冒泡； cancelable（布爾值）：是否可取消； view（AbstractView）：與事件關聯的視圖，一般為document.defaultView； detail（整數）：一般為0，一般只有事件處理程序使用； screenX（整數）：事件相對于屏幕的X坐標； screenY（整數）； clientX（整數）：事件相對于視口的X坐標； clientY（整數）； ctrlKey（布爾值）：是否按下了Ctrl鍵，默認為false； altKey（布爾值）； shiftKey（布爾值）； metaKey（布爾值）； button（整數）：表示按下了哪個鼠標鍵，默認為0； relatedTarget（對象）：表示與事件相關的對象。一般只有在模擬mouseover與mouseout時使用。

最后記得把event對象傳給dispatchEvent()方法。

如模擬按鈕的單擊事件：

//模擬click事件//獲取btnvar btn = document.querySelector("#btn");//創建eventvar event = document.createEvent("MouseEvents");//初始化eventevent.initMouseEvent("click",true,true,document.defaultView,0,0,0,0,0,false,false,false,false,0,null);//click事件綁定事件處理程序btn.onclick = function () {  console.log("hello");}//觸發事件btn.dispatchEvent(event); //hello//取消引用btn.onclick = null;

另外，建議使用構造函數"MouseEvent"：

var evt = new MouseEvent("click", {  bubbles: true,  cancelable: true,  view: window});

模擬鍵盤事件

首先創建鼠標事件對象的方法createEvent()傳入KeyboardEvents，返回的對象的方法initKeyEvent()，接收下面參數：

type（字符串）：要觸發的事件類型，“keydown”等； bubbles（布爾值）：表示事件是否應該冒泡； cancelable（布爾值）：是否可以取消； view（AbstractView）：與事件關聯的視圖。一般為document.defaultView