今天小編就爲大家分享一篇關於JavaScript"模擬事件"的注意要點詳解，寫的十分的全面細緻，具有一定的參考價值，對此有需要的朋友可以參考學習下。如有不足之處，歡迎批評指正。
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事件
//獲取btn
var btn = document.querySelector("#btn");
//創建event
var event = document.createEvent("MouseEvents");
//初始化event
event.initMouseEvent("click",true,true,document.defaultView,0,0,0,0,0,false,false,false,false,0,null);
//click事件綁定事件處理程序
btn.onclick = function () {
console.log("hello");
}
//在此我向大家推薦一個前端全棧開發交流圈：619586920 突破技術瓶頸，提升思維能力
//觸發事件
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；
key（布爾值）：表示按下的鍵的鍵碼；
location（整數）：表示按下哪裏的鍵。0爲主鍵盤；1爲左；2爲右；3爲數字鍵盤；4爲虛擬鍵盤；5爲手柄；
modifiers（字符串）：空格分隔的修改鍵列表，如“shift”；
repeat（整數）：在一行中按下了多少次這個鍵；
由於DOM3級不提倡使用keypress事件，因此只能利用這種技術來模擬keydown和keyup事件：
var textbox = document.querySelector("#myTextBox");
var event = document.createEvent("KeyboardEvent");
event.initKeyboardEvent("keydown",true,true,document.defaultView,"a",0,"Shift",0);
textbox.dispatchEvent(event);
在Firefox中，調用createEvent()並傳入“KeyEvents”就可以創建一個鍵盤事件，返回的事件對象會包含一個initKeyEvent()方法，接收參數：
- type；
- bubbles；
- cancelable；
- view；
- ctrlKey；
- altKey；
- shiftKey；
- metaKey；
- keyCode；
- charCode；
另外，建議使用構造函數“KeyboardEvent”
模擬其他事件
瀏覽器中很少使用變動事件和HTML事件；要模擬變動事件，可以用createEvent("MutationEvent");initMutationEvent();要模擬HTML事件，可以用createEvent("HTMLEvents");initEvent();
自定義DOM事件
用createEvent("CustomEvent");initCustomEvent()方法，接收參數：type；bubbles；cancelable；detail；
var btn = document.querySelector("#btn");
var evt = document.createEvent("CustomEvent");
evt.initCustomEvent("click",true,true,"Hello there");
btn.onclick = function () {
console.log(event.detail);
};
btn.dispatchEvent(evt);
IE中的事件模擬
調用document.createEventObject()方法，創建event對象，並指定必要的信息，最後在目標上調用fireEvent()方法，接收兩個參數：事件處理程序名稱和event對象：
var btn = document.querySelector("#btn");
var evt = document.createEventObject();
evt.screenX = 0;
evt.screenY = 0;
evt.clientX = 0;
evt.clientY = 0;
evt.ctrlKey = false;
evt.altKey = false;
evt.shiftKey = false;
evt.button = 0;
btn.fireEvent("onclick",evt);
結語
感謝您的觀看，如有不足之處，歡迎批評指正。
獲取資料
本次給大家推薦一個免費的學習羣，裏面概括移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。
對web開發技術感興趣的同學，歡迎加入Q羣：619586920，不管你是小白還是大牛我都歡迎，還有大牛整理的一套高效率學習路線和教程與您免費分享，同時每天更新視頻資料。
最後，祝大家早日學有所成，拿到滿意offer，快速升職加薪，走上人生巔峯。