DOM中的事件模擬

三個(gè)步驟：

首先通過(guò)document.createEvent()方法創(chuàng)建event對(duì)象，接收一個(gè)參數(shù)，即表示要?jiǎng)?chuàng)建的事件類型的字符串：

1. UIEvents（DOM3中的UIEvent）鼠標(biāo)和鍵盤事件；
2. MouseEvents（DOM3中的MouseEvent）鼠標(biāo)事件；
3. MutationEvents（DOM3中的MutationEvent）變動(dòng)事件；
4. HTMLEvents（沒(méi)有DOM3中對(duì)應(yīng)的事件）HTML事件；

其次在創(chuàng)建了event對(duì)象之后，還需要使用與事件有關(guān)的信息對(duì)其進(jìn)行初始化。每種類型的event對(duì)象都有一個(gè)特殊的方法，為它傳入適當(dāng)?shù)臄?shù)據(jù)就可以初始化該event對(duì)象。用event.init......()此類行的方法。

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

模擬鼠標(biāo)事件

首先創(chuàng)建鼠標(biāo)事件對(duì)象的方法createEvent()傳入MouseEvents，返回的對(duì)象的方法initMouseEvent()，接收15個(gè)信息：

1. type（字符串）：事件類型如“click”；
2. bubble（布爾值）：是否冒泡；
3. cancelable（布爾值）：是否可取消；
4. view（AbstractView）：與事件關(guān)聯(lián)的視圖，一般為document.defaultView；
5. detail（整數(shù)）：一般為0，一般只有事件處理程序使用；
6. screenX（整數(shù)）：事件相對(duì)于屏幕的X坐標(biāo)；
7. screenY（整數(shù)）；
8. clientX（整數(shù)）：事件相對(duì)于視口的X坐標(biāo)；
9. clientY（整數(shù)）；
10. ctrlKey（布爾值）：是否按下了Ctrl鍵，默認(rèn)為false；
11. altKey（布爾值）；
12. shiftKey（布爾值）；
13. metaKey（布爾值）；
14. button（整數(shù)）：表示按下了哪個(gè)鼠標(biāo)鍵，默認(rèn)為0；
15. relatedTarget（對(duì)象）：表示與事件相關(guān)的對(duì)象。一般只有在模擬mouseover與mouseout時(shí)使用。

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

如模擬按鈕的單擊事件：

//模擬click事件
//獲取btn
var btn = document.querySelector("#btn");
//創(chuàng)建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");
}
//觸發(fā)事件
btn.dispatchEvent(event); //hello
//取消引用
btn.onclick = null;

另外，建議使用構(gòu)造函數(shù)"MouseEvent"：

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

模擬鍵盤事件

首先創(chuàng)建鼠標(biāo)事件對(duì)象的方法createEvent()傳入KeyboardEvents，返回的對(duì)象的方法initKeyEvent()，接收下面參數(shù)：

1. type（字符串）：要觸發(fā)的事件類型，“keydown”等；
2. bubbles（布爾值）：表示事件是否應(yīng)該冒泡；
3. cancelable（布爾值）：是否可以取消；
4. view（AbstractView）：與事件關(guān)聯(lián)的視圖。一般為document.defaultView；
5. key（布爾值）：表示按下的鍵的鍵碼；
6. location（整數(shù)）：表示按下哪里的鍵。0為主鍵盤；1為左；2為右；3為數(shù)字鍵盤；4為虛擬鍵盤；5為手柄；
7. modifiers（字符串）：空格分隔的修改鍵列表，如“shift”；
8. repeat（整數(shù)）：在一行中按下了多少次這個(gè)鍵；

由于DOM3級(jí)不提倡使用keypress事件，因此只能利用這種技術(shù)來(lái)模擬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中，調(diào)用createEvent()并傳入“KeyEvents”就可以創(chuàng)建一個(gè)鍵盤事件，返回的事件對(duì)象會(huì)包含一個(gè)initKeyEvent()方法，接收參數(shù)：

1. type；
2. bubbles；
3. cancelable；
4. view；
5. ctrlKey；
6. altKey；
7. shiftKey；
8. metaKey；
9. keyCode；
10. 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；

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中的事件模擬

調(diào)用document.createEventObject()方法，創(chuàng)建event對(duì)象，并指定必要的信息，最后在目標(biāo)上調(diào)用fireEvent()方法，接收兩個(gè)參數(shù)：事件處理程序名稱和event對(duì)象：

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);

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)腳本之家的支持。如果你想了解更多相關(guān)內(nèi)容請(qǐng)查看下面相關(guān)鏈接

最新評(píng)論