DOM中的事件模擬
三個(gè)步驟：
首先通過(guò)document.createEvent()方法創(chuàng)建event對(duì)象，接收一個(gè)參數(shù)风宁，即表示要?jiǎng)?chuàng)建的事件類(lèi)型的字符串：
UIEvents（DOM3中的UIEvent）鼠標(biāo)和鍵盤(pán)事件；
MouseEvents（DOM3中的MouseEvent）鼠標(biāo)事件颈墅；
MutationEvents（DOM3中的MutationEvent）變動(dòng)事件富弦；
HTMLEvents（沒(méi)有DOM3中對(duì)應(yīng)的事件）HTML事件；
其次在創(chuàng)建了event對(duì)象之后铭污，還需要使用與事件有關(guān)的信息對(duì)其進(jìn)行初始化。每種類(lèi)型的event對(duì)象都有一個(gè)特殊的方法膀篮，為它傳入適當(dāng)?shù)臄?shù)據(jù)就可以初始化該event對(duì)象嘹狞。用event.init......()此類(lèi)行的方法。
最后就是觸發(fā)事件各拷。這需要使用dispatchEvent()方法，接收一個(gè)參數(shù)闷营，即表示要觸發(fā)的event對(duì)象烤黍。
模擬鼠標(biāo)事件
首先創(chuàng)建鼠標(biāo)事件對(duì)象的方法createEvent()傳入MouseEvents，返回的對(duì)象的方法initMouseEvent()傻盟，接收15個(gè)信息：
type（字符串）：事件類(lèi)型如“click”速蕊；
bubble（布爾值）：是否冒泡；
cancelable（布爾值）：是否可取消娘赴；
view（AbstractView）：與事件關(guān)聯(lián)的視圖规哲，一般為document.defaultView；
detail（整數(shù)）：一般為0诽表，一般只有事件處理程序使用唉锌；
screenX（整數(shù)）：事件相對(duì)于屏幕的X坐標(biāo)；
screenY（整數(shù)）竿奏；
clientX（整數(shù)）：事件相對(duì)于視口的X坐標(biāo)袄简；
clientY（整數(shù)）；
ctrlKey（布爾值）：是否按下了Ctrl鍵泛啸，默認(rèn)為false绿语；
altKey（布爾值）；
shiftKey（布爾值）；
metaKey（布爾值）吕粹；
button（整數(shù)）：表示按下了哪個(gè)鼠標(biāo)鍵种柑，默認(rèn)為0；
relatedTarget（對(duì)象）：表示與事件相關(guān)的對(duì)象匹耕。一般只有在模擬mouseover與mouseout時(shí)使用聚请。
最后記得把event對(duì)象傳給dispatchEvent()方法。
如模擬按鈕的單擊事件：
HTML復(fù)制全屏
1
//模擬click事件
2
//獲取btn
3
var btn = document.querySelector("#btn");
4
//創(chuàng)建event
5
var event = document.createEvent("MouseEvents");
6
//初始化event
7
event.initMouseEvent("click",true,true,document.defaultView,0,0,0,0,0,false,false,false,false,0,null);
8
//click事件綁定事件處理程序
9
btn.onclick = function () {
10
? console.log("hello");
11
}
12
//在此我向大家推薦一個(gè)前端全棧開(kāi)發(fā)交流圈：619586920? 突破技術(shù)瓶頸泌神，提升思維能力
13
//觸發(fā)事件
14
btn.dispatchEvent(event); //hello
15
//取消引用
16
btn.onclick = null;
另外良漱，建議使用構(gòu)造函數(shù)"MouseEvent"：
HTML復(fù)制全屏
1
var evt = new MouseEvent("click", {
2
? bubbles: true,
3
? cancelable: true,
4
? view: window
5
});
模擬鍵盤(pán)事件
首先創(chuàng)建鼠標(biāo)事件對(duì)象的方法createEvent()傳入KeyboardEvents，返回的對(duì)象的方法initKeyEvent()欢际，接收下面參數(shù)：
type（字符串）：要觸發(fā)的事件類(lèi)型母市，“keydown”等；
bubbles（布爾值）：表示事件是否應(yīng)該冒泡损趋；
cancelable（布爾值）：是否可以取消患久；
view（AbstractView）：與事件關(guān)聯(lián)的視圖。一般為document.defaultView浑槽；
key（布爾值）：表示按下的鍵的鍵碼蒋失；
location（整數(shù)）：表示按下哪里的鍵。0為主鍵盤(pán)桐玻；1為左篙挽；2為右；3為數(shù)字鍵盤(pán)镊靴；4為虛擬鍵盤(pán)铣卡；5為手柄；
modifiers（字符串）：空格分隔的修改鍵列表偏竟，如“shift”煮落；
repeat（整數(shù)）：在一行中按下了多少次這個(gè)鍵；
由于DOM3級(jí)不提倡使用keypress事件踊谋，因此只能利用這種技術(shù)來(lái)模擬keydown和keyup事件：
HTML復(fù)制全屏
1
var textbox = document.querySelector("#myTextBox");
2
var event = document.createEvent("KeyboardEvent");
3
event.initKeyboardEvent("keydown",true,true,document.defaultView,"a",0,"Shift",0);
4
textbox.dispatchEvent(event);
在Firefox中蝉仇，調(diào)用createEvent()并傳入“KeyEvents”就可以創(chuàng)建一個(gè)鍵盤(pán)事件，返回的事件對(duì)象會(huì)包含一個(gè)initKeyEvent()方法殖蚕，接收參數(shù)：
type轿衔；
bubbles；
cancelable睦疫；
view呀枢；
ctrlKey；
altKey笼痛；
shiftKey裙秋；
metaKey琅拌；
keyCode；
charCode摘刑；
另外进宝，建議使用構(gòu)造函數(shù)“KeyboardEvent”
模擬其他事件
瀏覽器中很少使用變動(dòng)事件和HTML事件；要模擬變動(dòng)事件枷恕，可以用createEvent("MutationEvent");initMutationEvent();要模擬HTML事件党晋，可以用createEvent("HTMLEvents");initEvent();
自定義DOM事件
用createEvent("CustomEvent");initCustomEvent()方法，接收參數(shù)：type徐块；bubbles未玻；cancelable；detail胡控；
HTML復(fù)制全屏
1
var btn = document.querySelector("#btn");
2
var evt = document.createEvent("CustomEvent");
3
evt.initCustomEvent("click",true,true,"Hello there");
4
btn.onclick = function () {
5
? console.log(event.detail);
6
};
7
btn.dispatchEvent(evt);
IE中的事件模擬
調(diào)用document.createEventObject()方法扳剿，創(chuàng)建event對(duì)象，并指定必要的信息昼激，最后在目標(biāo)上調(diào)用fireEvent()方法庇绽，接收兩個(gè)參數(shù)：事件處理程序名稱和event對(duì)象：
HTML復(fù)制全屏
1
var btn = document.querySelector("#btn");
2
var evt = document.createEventObject();
3
evt.screenX = 0;
4
evt.screenY = 0;
5
evt.clientX = 0;
6
evt.clientY = 0;
7
evt.ctrlKey = false;
8
evt.altKey = false;
9
evt.shiftKey = false;
10
evt.button = 0;
11
btn.fireEvent("onclick",evt);
結(jié)語(yǔ)
感謝您的觀看，如有不足之處橙困，歡迎批評(píng)指正瞧掺。
“我自己是一名從事了5年前端的老程序員，辭職目前在做講師凡傅，今年年初我花了一個(gè)月整理了一份最適合2019年學(xué)習(xí)的web前端干貨辟狈，從最基礎(chǔ)的HTML+CSS+JS到移動(dòng)端HTML5到各種框架都有整理，送給每一位前端小伙伴夏跷，這里是小白聚集地哼转，歡迎初學(xué)和進(jìn)階中的小伙伴。"
加QQ群：512676244（招募中）
