JavaScript 事件——「模擬事件」的注意要點

DOM中的事件模擬

三個步驟:瀏覽器

首先經過document.createEvent()方法建立event對象,接收一個參數,即表示要建立的事件類型的字符串:函數

  • UIEvents(DOM3中的UIEvent)鼠標和鍵盤事件;spa

  • MouseEvents(DOM3中的MouseEvent)鼠標事件;code

  • MutationEvents(DOM3中的MutationEvent)變更事件;對象

  • HTMLEvents(沒有DOM3中對應的事件)HTML事件;seo

其次在建立了event對象以後,還須要使用與事件有關的信息對其進行初始化。每種類型的event對象都有一個特殊的方法,爲它傳入適當的數據就能夠初始化該event對象。用event.init......()此類行的方法。事件

最後就是觸發事件。這須要使用dispatchEvent()方法,接收一個參數,即表示要觸發的event對象。字符串

模擬鼠標事件

首先建立鼠標事件對象的方法createEvent()傳入MouseEvents,返回的對象的方法initMouseEvent(),接收15個信息:get

  1. type(字符串):事件類型如「click」;it

  2. bubble(布爾值):是否冒泡;

  3. cancelable(布爾值):是否可取消;

  4. view(AbstractView):與事件關聯的視圖,通常爲document.defaultView

  5. detail(整數):通常爲0,通常只有事件處理程序使用;

  6. screenX(整數):事件相對於屏幕的X座標;

  7. screenY(整數);

  8. clientX(整數):事件相對於視口的X座標;

  9. clientY(整數);

  10. ctrlKey(布爾值):是否按下了Ctrl鍵,默認爲false;

11. altKey(布爾值);
12. shiftKey(布爾值);
13. metaKey(布爾值);
14. button(整數):表示按下了哪一個鼠標鍵,默認爲0;
15. 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");
}
//觸發事件
btn.dispatchEvent(event); //hello
//取消引用
btn.onclick = null;

另外,建議使用構造函數"MouseEvent":

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

模擬鍵盤事件

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

  1. type(字符串):要觸發的事件類型,「keydown」等;

  2. bubbles(布爾值):表示事件是否應該冒泡;

  3. cancelable(布爾值):是否能夠取消;

  4. view(AbstractView):與事件關聯的視圖。通常爲document.defaultView

  5. key(布爾值):表示按下的鍵的鍵碼;

  6. location(整數):表示按下哪裏的鍵。0爲主鍵盤;1爲左;2爲右;3爲數字鍵盤;4爲虛擬鍵盤;5爲手柄;

  7. modifiers(字符串):空格分隔的修改鍵列表,如「shift」;

  8. 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()方法,接收參數:

  1. type;

  2. bubbles;

  3. cancelable;

  4. view;

  5. ctrlKey;

  6. altKey;

  7. shiftKey;

  8. metaKey;

  9. keyCode;

  10. 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);
相關文章
相關標籤/搜索